请提前阅读on方法源码分析:点击打开链接
bind方法源码:
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }delegate方法:
delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }
one方法:
one: function( types, selector, data, fn ) { return this.on( types, selector, data, fn, 1 ); }从上面的源码看到:
(1)bind方法由于直接绑定事件到调用对象上面,所以他的selector就是null,表示不能进行代理,但是on方法可以进行代理!
(2)在jQuery.1.11.1中以前的live方法已经被移除了!
(3)从on函数中的代码可以知道,如果给on函数的fn传递false,那么回调函数就是returnFalse函数!
(4)one方法的最后一个参数是1,通过这个方法绑定的事件只会被执行一次!
(5)回调函数中this指向当前元素!,也就是currentTarget。apply( matched.elem, args )是在dispatch里面的源码,但是因为这里用的是apply而不是call,所以直接把args逐个封装到回调函数中。这个args只有一个参数args[0]=event所以这里回调函数中唯一一个参数就是event,同时可以通过event.data获取数据,通过delegateTarget获取代理对象BODY。通过handleObj可以获取通过add方法添加的事件的所有信息,也就是通过add方法里面添加的handleObj所有属性!同时可以通过currentTarget获取当前所在的元素!总之一句话:在该回调函数中可以获取这个调用事件的所有的信息!详见点击打开链接
问题1:到底用delegate还是bind方法?
解答:尽量用delegate方法,既快又少占用内存!
如果能够绑定到document上,那么有以下优点:
(1)document对象很快就能访问,而且可以在页面任何时间点为他添加事件处理程序。也就说,只要可单机的元素出现在页面上就可以具备适当的功能
(2)只添加一个事件处理程序所需要的DOM引用少,所花的时间更少
(3)整个页面占用的内存更少,提升页面性能
(4)事件代理还有一个重要的好处,那就是方便移除事件处理程序防止内存泄漏,因为绑定的事件越少,越容易集中移除。同时代理可以代理后面在DOM中动态添加的内容
click,mouseup,keyup,keydown,mousedown,keypress等适合代理!虽然mouseover,mouseout也冒泡,但是代理他们不容易,而且经常需要计算元素的位置,因为元素在本身和子元素之间移动时候也会触发!
注意:在事件处理程序中删除按钮能够阻止事件冒泡,目标元素在文档中是事件冒泡的前提!
HTML部分:
<div id="father" style="background-color:red;height:100px;"> <div style="background-color:yellow;height:50px;" id="child"> 我是华为 </div> </div>JS部分:
$("#father").delegate("#child","click",function() { alert("click"); }); var $child= $("#child"); $child.click(function() { alert("click child!"); //用移除元素看是否影响元素冒泡 this.remove();//我们发现把当前元素移除以后,事件不会冒泡到父元素上面! });note:这时候father元素绑定的click事件不会被调用,因为child元素已经移除, 所以他不再文档中,不满足冒泡的前提!