Js中事件委托的实现

加粗样式

**
我们首先来看下面一段程序（定义了一个无序列表，其中包括三个li标签）：

<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say Hi</li>
</ul>

接下来，我们分别为三个li添加点击事件（传统的方法如下）：

window.onload=function ()
{
 var oUl=document.getElementById("myLinks");
 var oLi=oUl.getElementsByTagName("li");
 for (var i=0;i<oLi.length;i++)
 {
   oLi[i].onclick=function()
   {
     alert("Hello,Wrold");
   }
 }
}

我们通过遍历ul中的每个li，为其添加点击事件，虽然能实现预期的效果，但是假设我们有1000个li需要添加点击事件呢？这个时候我们可以使用事件委托来实现，事件委托利用了冒泡，我们使用事件委托只为<ul>元素添加一个onclick的点击事件处理程序，由于所有列表元素都是ul元素的子节点，而且他们的事件会冒泡，所以单击事件最终会被这个函数处理。且事件目标是被单击的属性，因为我们可以通过检测id属性来决定采取适当的操作。下面是使用事件委托实现的代码：

 window.onload=function()
  {
    var aList = document.getElementById("myLinks");
    aList.onclick = function ()
    {
      var ev = ev || window.event;
      var target = ev.target || ev.srcElement;
      /*var target=event.target;*/
      if (target.nodeName.toLocaleLowerCase()==="li")
      /*nodeName返回的是元素的标签名，比如p、div*/
      {
        /*返回点击元素的节点*/
        switch (target.id)
        {
          case "goSomewhere":
            document.write("实现事件委托了哦");
            break;

          case "doSomething":
            alert("Hello,Wrold");
            break;

          case "sayHi":
            alert("Hi,小翠学姐");
            break;
        }
      }
    }
  }
  其分别有几下几个优点：

document对象很快就可以访问，而且可以在页面生命周期的任何点上为它添加事件处理程序，即只要可单击的元素呈现在页面上，就可以立即具备适当的功能。
在页面设置事件处理程序的时间更少。只添加一个事件处理程序所需的DOM引用更少，说花的时间更少。
整个页面占用的内存空间更少，能够提升整体性能。
补充：事件委托的实质：
对其父级元素这一对象进行操作，比如上面的程序中我们给最外面的Div添加点击事件，那么给里面的ul、li、a做点击事件时，都会冒泡到最外层的Div上，所以都会触发。

Js中事件委托的实现

加粗样式

猜你喜欢