欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript動態(tài)綁定詳解

 更新時間:2017年09月14日 10:23:46   作者:Lockeyi  
這篇文章主要為大家詳細(xì)介紹了JavaScript動態(tài)綁定,關(guān)于JavaScript中為元素綁定的事件失效的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下

問題描述:

假設(shè)我們的網(wǎng)頁中動態(tài)生成了一個按鈕,在這個按鈕生成之前我們按照一般的事件綁定方法為此按鈕綁定了觸發(fā)事件,但是問題是綁定的事件并沒有生效(JavaScript中為元素綁定的事件失效)

分析

1.首先我們來看一下這個按鈕是怎么回事:

問題中按鈕有一個很關(guān)鍵的特性:動態(tài)生成,也就是說是在網(wǎng)頁加載完成之后執(zhí)行某些操作才產(chǎn)生的,它一開始是不存在的;

2.然后我們來分析一下事件的綁定

對于動態(tài)生成的元素,它不同于一般的網(wǎng)頁既有元素,它的事件綁定不能通過普通的事件綁定實現(xiàn)。

3.關(guān)于JavaScript事件綁定的小解(針對本題盜圖解析)

這里寫圖片描述

由圖中我們可以看到事件冒泡即由最具體的元素(文檔嵌套最深節(jié)點)接收,然后逐步上傳至document

事件捕獲會由最先接收到事件的元素然后傳向最里邊(我們可以將元素想象成一個盒子裝一個盒子,而不是一個積木堆積)

然后我們進(jìn)入dom事件流

DOM2級事件規(guī)定事件包括三個階段:

① 事件捕獲階段

② 處于目標(biāo)階段

③ 事件冒泡階段

我們分析一下第一階段就可以知道為什么了,js中一般事件綁定是在網(wǎng)頁生成的時候針對具體元素去綁定的,那么請問:網(wǎng)頁初始生成時按鈕存在嗎?答:NOP。這就是為什么事件沒有綁定上去,因為都沒找到元素啊啊啊啊啊,綁個毛線

解決方法(jQuery on方法)

通過將事件綁定到存在的父元素上讓子元素的事件有效

jQuery on用法格式:

$(selector).on(event,childSelector,data,function,map)

示例,比如說id為btn的元素為動態(tài)生成,它的父元素為btnParent(必須是網(wǎng)頁加載時就有的元素,也可以直接綁定到body上去)那么我們可以這樣為它綁定處理事件

$("#btnParent").on("click","#btn",function(){
  console.log('binded!');
 });

如果想要更深層次的理解,那么請跟我一起閱讀一下jQuery.on()的源碼實現(xiàn)

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
  var type, origFn;

  // 類型可以使類型映射或者句柄映射
  if ( typeof types === "object" ) {
    // ( types-Object, selector, data )
    if ( typeof selector !== "string" ) {
      // ( types-Object, data )
      data = data || selector;
      selector = undefined;
    }
    // 遍歷types對象,針對每一個屬性綁定on()方法
    // 將types[type]作為fn傳入
    for ( type in types ) {
      this.on( type, selector, data, types[ type ], one );
    }
    return this;
  }

  // 參數(shù)修正
  // jQuery這種參數(shù)修正的方法很好
  // 可以兼容多種參數(shù)形式
  // 可見在靈活調(diào)用的背后做了很多處理
  if ( data == null && fn == null ) {
    // ( types, fn )
    fn = selector;
    data = selector = undefined;
  } else if ( fn == null ) {
    if ( typeof selector === "string" ) {
      // ( types, selector, fn )
      fn = data;
      data = undefined;
    } else {
      // ( types, data, fn )
      fn = data;
      data = selector;
      selector = undefined;
    }
  }
  if ( fn === false ) {
    // fn傳入false時,阻止該事件的默認(rèn)行為
    // function returnFalse() {return false;}
    fn = returnFalse;
  } else if ( !fn ) {
    return this;
  }

  // one()調(diào)用on()
  if ( one === 1 ) {
    origFn = fn;
    fn = function( event ) {
      // Can use an empty set, since event contains the info
      // 用一個空jQuery對象,這樣可以使用.off方法,
      // 并且event帶有remove事件需要的信息
      jQuery().off( event );
      return origFn.apply( this, arguments );
    };
    // Use same guid so caller can remove using origFn
    // 事件刪除依賴于guid
    fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
  }

  // 這里調(diào)用jQuery的each方法遍歷調(diào)用on()方法的jQuery對象
  // 如$('li').on(...)則遍歷每一個li傳入add()
  // 推薦使用$(document).on()或者集合元素的父元素
  return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
  });
},

關(guān)于jQuery還有很多其他的事件綁定方法,當(dāng)然不一定適用,也提一下

.bind(), .live(), .delegate()

但是說到底.bind(), .live(), .delegate()都是通過.on()來實現(xiàn)的,.unbind(), .die(), .undelegate(),也是一樣的都是通過.off()來實現(xiàn)的

我們看一下jQuery的.bind(), .live(), .delegate()的實現(xiàn)源碼就清楚了

jQuery.fn.extend( {

  bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
    //注意this.on()
  },
  unbind: function( types, fn ) {
    return this.off( types, null, fn );
    //注意this.off()
  },

  delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
  },
  undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ?
      this.off( selector, "**" ) :
      this.off( types, selector || "**", fn );
  }
} );

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序?qū)崙?zhàn)之上拉(分頁加載)效果(2)

    微信小程序?qū)崙?zhàn)之上拉(分頁加載)效果(2)

    這篇文章主要介紹了微信小程序?qū)崙?zhàn)之上拉加載、分頁加載效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • 3款實用的在線JS代碼工具(國外)

    3款實用的在線JS代碼工具(國外)

    本文為大家推薦3款非常實用的在線JS代碼工具,可以幫助你方便地處理JavaScript或jQuery代碼
    2012-03-03
  • 基于js實現(xiàn)的圖片拖拽排序源碼實例

    基于js實現(xiàn)的圖片拖拽排序源碼實例

    這篇文章主要給大家介紹了關(guān)于如何基于js實現(xiàn)的圖片拖拽排序的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • JSX在render函數(shù)中的應(yīng)用詳解

    JSX在render函數(shù)中的應(yīng)用詳解

    這篇文章主要介紹了JSX在render函數(shù)中的應(yīng)用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • JavaScript輸入框字?jǐn)?shù)實時統(tǒng)計更新

    JavaScript輸入框字?jǐn)?shù)實時統(tǒng)計更新

    這篇文章主要介紹了JavaScript輸入框字?jǐn)?shù)實時統(tǒng)計更新,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • 利用原生js模擬直播彈幕滾動效果

    利用原生js模擬直播彈幕滾動效果

    彈幕是一個很常見的功能,這篇文章主要給大家介紹了關(guān)于如何利用原生js模擬直播彈幕滾動效果的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-07-07
  • javascript構(gòu)造函數(shù)以及原型對象的理解

    javascript構(gòu)造函數(shù)以及原型對象的理解

    本文主要介紹了javascript構(gòu)造函數(shù)以及原型對象的理解。分享了有關(guān)它們的實例代碼,具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • javascript中if和switch,==和===詳解

    javascript中if和switch,==和===詳解

    這篇文章主要給大家詳細(xì)介紹了javascript中if和switch,==和===的區(qū)別和聯(lián)系,十分的細(xì)致實用,有需要的小伙伴可以參考下。
    2015-07-07
  • JS文件中加載jquery.js的實例代碼

    JS文件中加載jquery.js的實例代碼

    這篇文章主要介紹了JS文件中加載jquery.js的方法,JS文件添加其他JS的實例代碼,感興趣的小伙伴們可以參考一下,具體如下
    2018-05-05
  • js+css實現(xiàn)的簡單易用兼容好的分頁

    js+css實現(xiàn)的簡單易用兼容好的分頁

    使用html、js、css實現(xiàn)的簡單易用兼容好的分頁,具體的實現(xiàn)如下,感興趣的朋友可以參考下
    2013-12-12

最新評論