jquery的bind跟on绑定事件的区别

时间：2020-12-15 19:44:15

jquery的bind跟on绑定事件的区别：主要是事件冒泡；

jquery文档中bind和on函数绑定事件的用法：

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

从文档中可以看出，.on方法比.bind方法多一个参数’selector’

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$(‘ul’).on(‘click’, ‘li’, function(){console.log(‘click’);})就是筛选出ul下的li给其绑定click事件；

那么这个selector参数的好处是什么?

好处在于.on方法

原理是事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理；

这样的好处

1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；

2.为动态添加的元素也能绑上指定事件；

如：

(′ulli′).on(′click′,function()console.log(′click′);)的绑定方式和 (‘ul li’).bind(‘click’, function(){console.log(‘click’);})一样；我通过js给ul添加了一个li：$(‘ul’).append(‘

  • js new li
  • ’)；’)；这个新加的li是不会被绑上click事件的

    • 但是我用 (′ul′).on(′click′,′li′,function()console.log(′click′);方式绑定，然后动态添加li: (‘ul’).append(‘

  • js new li
  • ’);这个新生成的li被绑上了click事件

    • 1：bind()：为每个匹配元素的特定事件绑定事件处理函数。
    　　bind(type,[data],fn)
    　　type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。
    　　比如”click”或”submit”，还可以是自定义事件名。
    　　data:作为event.data属性值传递给事件对象的额外数据对象
    　　fn:绑定到每个匹配元素的事件上面的处理函数

    /* The .bind() method attaches the event handler directly to the DOM

    element in question ( “#members li a” ). The .click() method is
    just a shorthand way to write the .bind() method. */

    ( “#members li a” ).bind( “click”, function( e ) {} );( “#members li a” ).click( function( e ) {} );

    优点：

    这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案
    非常方便简单的绑定事件到元素上
    .click(), .hover()…这些非常方便的事件绑定，都是bind的一种简化处理方式
    对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式
    缺点：

    它会绑定事件到所有的选出来的元素上
    它不会绑定到在它执行完后动态添加的那些元素上
    当元素很多时，会出现效率问题
    当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题

    　　2：on()在选择元素上绑定一个或多个事件的事件处理函数。
    　　on(events,[selector],[data],fn)
    　　events:一个或多个用空格分隔的事件类型和可选的命名空间， 如”click”或”keydown.myPlugin” 。
    　　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
    　　data:当一个事件被触发时要传递event.data给事件处理函数。
    　　fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

      对比发现on 和bind的 差别不大， 但是on多一个[selector]  可以过滤指定元素

    /* The jQuery .bind(), .live(), and .delegate() methods are just one

    line pass throughs to the new jQuery 1.8.2 .on() method */

    // Bind
    ( “#members li a” ).on( “click”, function( e ) {} );( “#members li a” ).bind( “click”, function( e ) {} );

    // Live
    ( document ).on( “click”, “#members li a”, function( e ) {} );( “#members li a” ).live( “click”, function( e ) {} );

    // Delegate
    ( “#members” ).on( “click”, “li a”, function( e ) {} );( “#members” ).delegate( “li a”, “click”, function( e ) {} );

    优点：

    提供了一种统一绑定事件的方法
    仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()
    缺点：

    也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。
    结论：

    用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
    不要再用.live()了，它已经不再被推荐了，而且还有许多问题
    .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。
    我们可以用.on()来代替上述的3种方法
    标签：

    相关文章