Event delegation
关于event delegation背景
其实event delegation 是对javascript的事件流的一种算是基础应用吧.....
首先当然要了解javascript的事件流机制，在dom level 2的event model 里有具体解释.....这个自己看吧....这儿
其实就是Event bubbling机制：当document对象接收一个事件，然后在捕获期间找到最具体的事件影响的元素，一旦这个元素绑定这个事件，事件将以冒泡的形式返回到document对象
那么如何应用呢？
应用
还记得addEventListener 里的最后一个参数么？一般我们都传false,这里......呵呵。
我们可以直接用通过一个附加属性来进行事件与事件句柄绑定。
如下：
场景 你需要对某一个列表中的每个元素绑定事件：
var test= { init: function() { var nav = document.getElementById('nav'); var links = nav.getElementsByTagName('a'); for ( var i = 0, j = links.length; i < j; ++i ) { if ( links.className == 'button' ) { links.onclick = this.onclick; } } }, onclick: function() { this.href = this.href + '?name=value; return true; }}
如果使用event delegation 只需父级节点进行绑定
var test= { init: function() { var nav = document.getElementById('nav'); nav.onclick = this.onclick } }, onclick: function(e) { event = e|| window.event; //IE uses srcElement as the target var target = event.target || event.srcElement; if ( target.className == 'bundle' ) { target.href = target.href + '?name=value'; } return true; }}
好处
1.代码少了，迭代dom的代码少了，重复绑定的代码少了，比如你动态增加节点
2.内存使用少了.......
页:
[1]