• 事件委托和事件绑定


    先通过一个例子来引出事件委托:

      假设有一个ul父节点,包含了很多li的子节点,点击li触发相应的事件

    <ul id="parent">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
        </ul>

      我们通常的写法是为每一个li都添加一个onclick事件监听。

    window.onload = function(){
      var parent = document.getElementById('parent');
      var children = parent.getElementsByTagName('li');
      for(var i=0,len=children.length; i<len;i++){
       children[i].onclick = function(){
          alert(this.innerHTML);
        } 
      }
    }

      如果这个ul的子元素需允许无限态的添加时,就会出现问题:

        1.新添加的元素不会绑定事件,所以需要每次添加li的同时要添加绑定事件

        2.绑定的事件越多,性能越差

          为了解决这个问题,可以用事件代理。更简单的方法是使用事件委托。

    JavaScript中事件传播过程:

      事件的处理流成分为三阶段:

        一、事件捕获阶段:当某个元素触发某个事件时,首先会触发根元素document,然后事件将沿着dom树向下传播给目标节点的每一个祖先节点,直到目标节点。

        二、目标阶段:到达目标元素之后,执行目标元素的事件处理函数

        三、事件冒泡阶段:从目标元素开时,事件将沿着DOM树向上传播,直到根节点。

      下面引用一张网上的图: 

       

      那么到了正题上了,事件委托就是利用事件冒泡原理,把处理任务委托给父元素或者祖先元素(通常用父元素),我们通过目标对象来判断事件源,并执行事件处理。

    事件委托实现:

      网上搜索有太多的例子,下面把刚开始的例子用事件委托的方法来实现。用事件委托的方法,动态添加的元素不需要再绑定事件了。

    <ul id="parent">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
        </ul>
         <script>
            window.onload = function(){
                var parent = document.getElementById('parent');
                 parent.addEventListener('click',function(event){
                    var event = event || window.event;
                    var target = event.target || event.srcElement;
                    if(target.nodeName.toUpperCase() == 'LI'){
                        alert(target.innerHTML)
                    }
                },false)
            }
        </script>

    事件委托带来的优点:

      1.不需要为每一个元素都添加监听事件而是通过委托给父元素来处理。这样就减少了内存,性能提高了

      2.可以方便动态添加元素。不需要再为新添加的元素重新绑定事件。

  • 相关阅读:
    Java的三种代理模式
    关于C# 中的Attribute 特性
    jvm虚拟机原理1
    Java和C#中的接口对比(有你不知道的东西)
    c# 方法参数(传值,传引用,ref,out,params,可选参数,命名参数)
    Java运行时,各种类型存储介绍
    Java中的内存处理机制和final、static、final static总结
    Debug目录、Release目录,bin目录、obj目录,vshost.exe.config文件、.exe.config文件分析【C#】
    C#有关的vshost、exe、config格式说明
    C#中的程序集和命名空间
  • 原文地址:https://www.cnblogs.com/yangkangkang/p/5630295.html
走看看 - 开发者的网上家园