YUI 3 中的 Event Delegation

今天在 YUIBlog 上看到了一篇文章：Event Delegation With YUI 3， 发现 YUI 3 中内置的这个功能确实很好用。文中举了一个例子，假设有一个 Twitter 类的应用，显示固定条数的 tweets ，它每2分钟刷新一次，这个时候可能会出现新的 tweet ，而旧的 tweet 会被挤出去。假如我们想为每一个 tweet 中的头像添加点击事件的话，应该怎么办呢？

如果我们直接为每个 tweet 添加事件的话，你就要在每次更新的时候把旧的事件处理函数移除然后再为当前所有的 tweets 添加一次，不小心还会遭遇到 IE 的内存泄露问题。

还好我们可以从DOM事件冒泡机制中获益（关于DOM 事件机制可以看这里），假设我们有下面一段代码：

 

 <ul id="container">
2         <li><a href="#"><span>Item 1</span></a></li>
3     <li><a href="#"><span>Item 2</span></a></li>
4     <li><a href="#"><span>Item 3</span></a></li>
5     <li><a href="#"><span>Item 4</span></a></li>
6     <li><a href="#"><span>Item 5</span></a></li>
7     <li><a href="#"><span>Item 6</span></a></li>
8 </ul>

 

 

根据事件冒泡机制，我们可以在列表中链接的父节点 ul 上来捕获所有链接的点击事件，并且可以在事件处理函数中定位到所点击的链接对象。YUI 3 中的 delegate() 函数就是来做这种事情的。在 YUI 中，假设我们要为上面示例代码中的每一个链接添加事件，可以这么写：

 

 Y.on("click", handleClick,"#container li a");

 

 

而 Y.delegate() 和 Y.on() 的语法很相似：

 

 Y.delegate('click', handleClick, '#container', 'li a');

 

 

其中第三个参数是父节点的ID ，用来捕获事件。另外你也可以在一个 YUI Node 对象上实现 delegation ：

 

 Y.one('#container').delegate('click', handleClick, 'li a');  // 这行代码和上面的效果一样

 

下面解释一下怎么通过事件获取相应的节点：

 

 var handleClick = function(e){
2   // e.target 点击的对象，在示例中是 a 标签里的 span 节点对象
3  
4   // e.currentTarget 通过delegate 监听的对象，在示例中是 A 节点对象
5  
6   // e.container 用来捕捉事件的父节点对象，在示例中是 ul 节点对象
7 }

 

综上可以看出，通过 delegate 来监听事件是一种很好的方式，它可以避免很多冗余代码并且简化操作，在某些场合尤其有用。