JavaScript动态绑定详解

  • Z时代
  • 2024-01-10
  • 分类：综合

问题描述：

假设我们的网页中动态生成了一个按钮，在这个按钮生成之前我们按照一般的事件绑定方法为此按钮绑定了触发事件，但是问题是绑定的事件并没有生效（JavaScript中为元素绑定的事件失效）

分析

1.首先我们来看一下这个按钮是怎么回事：

问题中按钮有一个很关键的特性：动态生成，也就是说是在网页加载完成之后执行某些操作才产生的，它一开始是不存在的；

2.然后我们来分析一下事件的绑定

对于动态生成的元素，它不同于一般的网页既有元素，它的事件绑定不能通过普通的事件绑定实现。

3.关于JavaScript事件绑定的小解（针对本题盗图解析）

这里写图片描述

由图中我们可以看到事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document

事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）

然后我们进入dom事件流

DOM2级事件规定事件包括三个阶段：

① 事件捕获阶段

② 处于目标阶段

③ 事件冒泡阶段

我们分析一下第一阶段就可以知道为什么了，js中一般事件绑定是在网页生成的时候针对具体元素去绑定的，那么请问：网页初始生成时按钮存在吗？答：NOP。这就是为什么事件没有绑定上去，因为都没找到元素啊啊啊啊啊，绑个毛线

解决方法（jQuery on方法）

通过将事件绑定到存在的父元素上让子元素的事件有效

jQuery on用法格式：

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

示例，比如说id为btn的元素为动态生成，它的父元素为btnParent(必须是网页加载时就有的元素，也可以直接绑定到body上去)那么我们可以这样为它绑定处理事件

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

如果想要更深层次的理解，那么请跟我一起阅读一下jQuery.on()的源码实现

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;
  }
  // 参数修正
  // jQuery这种参数修正的方法很好
  // 可以兼容多种参数形式
  // 可见在灵活调用的背后做了很多处理
  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时，阻止该事件的默认行为
    // function returnFalse() {return false;}
    fn = returnFalse;
  } else if ( !fn ) {
    return this;
  }
  // one()调用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++ );
  }
  // 这里调用jQuery的each方法遍历调用on()方法的jQuery对象
  // 如$('li').on(...)则遍历每一个li传入add()
  // 推荐使用$(document).on()或者集合元素的父元素
  return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
  });
},

关于jQuery还有很多其他的事件绑定方法，当然不一定适用，也提一下

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

但是说到底.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的

我们看一下jQuery的.bind(), .live(), .delegate()的实现源码就清楚了

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 );
  }
} );

以上是 JavaScript动态绑定详解 的全部内容， 来源链接： utcz.com/z/324686.html

回到顶部