Javascript事件代理

2017-05-08 19:51:48 0

事件代理

在实际的开发工作中，我们经常需要对很多元素添加事件，例如对表格的行添加点击事件，对ul的li元素添加点击事件等等，前面我们学习了javascript的事件冒泡机制，那么我们就可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。下面我们具体举个例子来解释如何使用这个特性：

<ul id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

要给每个li添加一个点击事件，我们通常的写法，是为每个li添加一个onClick的处理函数。更简单的方法是使用事件冒泡机制，当事件冒泡到更上层的父节点的时候，我们通过判断Event对象的目标对象（target）来判断并获取事件源li。下面的代码可以完成我们想要的效果：

window.onload = function() {  
    //获取父节点，并为它添加一个click事件
    document.getElementById("parent-list").addEventListener("click",function(e) {
        //检查事件源e.targe是否为li
        if(e.target && e.target.nodeName.toUpperCase() == "LI") {
            console.log("List item " + e.target.id + " was clicked!");
        }
        e.stopPropagation(); //阻止事件继续冒泡
    });
}

点击”Item 1”，输出以下信息：
1

List item post-1 was clicked!

优缺点

JavaScript事件代理使用的好处： 1、那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险； 2、在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。

使用中应该注意的问题： 1、事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍； 2、不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）； 3、在管理鼠标事件的时候有些需要注意，如果处理mousemove这样的事件的话遇上性能瓶颈的风险就很大，因为mousemove事件触发非常频繁，而且mouseout则因为其怪异的表现而变得很难用事件代理来管理。

jquery的事件代理：

现有的主流javascript库的事件代理已经实现了，例如jquery的事件代理方式实现上述功能：

window.onload = function() {  
    $("#parent-list").delegate("li", "click", function(){
        console.log("you clicked item!", $(this));
    });
}

点击”Item 1”，输出以下信息：

1	you clicked item! [li#post-1, context: li#post-1]

感谢您的阅读，有不足之处请在评论为我指出！

上一篇：无

下一篇： CSS之预处理器