JavaScript事件代理和委托（Delegation）

时间：2023-03-08 16:12:09

JavaScript事件代理

首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
假设有一个 UL 的父节点，包含了很多个 Li 的子节点：
  <ul id="parent-list">

       <li id="post-1">Item </li>

       <li id="post-2">Item </li>

       <li id="post-3">Item </li>

       <li id="post-4">Item </li>

       <li id="post-5">Item </li>

       <li id="post-6">Item </li>

 </ul>

当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都添加一些类似onMouseOver或者onClick之类的事件监听。

 function addListeners4Li(liNode){

     liNode.onclick = function clickHandler(){...};

     liNode.onmouseover = function mouseOverHandler(){...}

 }

 window.onload = function(){

     var ulNode = document.getElementById("parent-list");

     var liNodes = ulNode.getElementByTagName("Li");

     for(var i=, l = liNodes.length; i < l; i++){

         addListeners4Li(liNodes[i]);

     }

 }

如果这个UL中的Li子元素会频繁地添加或者删除，我们就需要在每次添加Li的时候都调用这个addListeners4Li方法来为每个Li节点添加事件处理函数。这就添加的复杂度和出错的可能性。

更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码可以完成我们想要的效果

 //事件代理

 var ulNode=document.getElementById('parent-list');//父亲节点对象

     ulNode.addEventListener('click', function(event){ //event事件对象

         var target=event.target || event.srcElement; //事件目标

             if (!!target && target.nodeName.toUpperCase()==='LI') {

                 // statement

                 console.log('target'+target+target.innerHTML);

             }

9　　});//默认为事件冒泡，布尔值false

为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。

从而可以获取到相应的信息，并作处理。

文章来源： http://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html

相关文章