Js中事件委托的实现

**

加粗样式

**
我们首先来看下面一段程序(定义了一个无序列表,其中包括三个li标签):


接下来,我们分别为三个li添加点击事件(传统的方法如下):

window.onload=function ()
{
 var oUl=document.getElementById("myLinks");
 var oLi=oUl.getElementsByTagName("li");
 for (var i=0;i

我们通过遍历ul中的每个li,为其添加点击事件,虽然能实现预期的效果,但是假设我们有1000个li需要添加点击事件呢?这个时候我们可以使用事件委托来实现,事件委托利用了冒泡,我们使用事件委托只为

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

你可能感兴趣的:(Js中事件委托的实现)