Js事件委托利用

今天来给大家分享一下关于事件委托的一些心得，相信程序猿门对于事件委托这四个字眼一定都非常熟悉了，事件委托又称之为事件代理，多用于来处理给一个dom元素绑定多个事件的情境下，那么事件委托好用么？答案显而易见 非常好用
JavaScript高级程序设计上对事件委托的定义是：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
那么何为事件冒泡呢？不多上图！
事件冒泡是事件流事件中的一种，事件流又分为事件冒泡及事件捕获**

下面这个图片大家应该心领神会吧，气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。

相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，由下向上，由里而外，直至传递到dom的根节点的过程叫做事件冒泡。

无事件委托代码如下
无事件委托的代码问题：
1、浪费
2、后添加的节点，没有事件

  		<ul id = 'ul1'>
            <li>111</li>
            <li>222</li>
            <li>333</li>
           
        </ul>
        <button id = 'btn1'>添加新的li节点</button>
    

设置点击li标签变红色

   window.onload = function(){
          var oUl = document.getElementById("ul1");
           var aLis = oUl.getElementsByTagName("li");
                for(var i = 0; i < aLis.length; i++){
                    aLis[i].onclick = function(){
                        this.style.backgroundColor = "red";
                    }
                }
            		var oBtn = document.getElementById("btn1");
           			var i = 3;
           			oBtn.onclick = function(){
            		var newLi = document.createElement("li");
                    newLi.innerHTML = i++ * 111;
           		    oUl.appendChild(newLi);
                }
            }
            

有事件委托代码
事件委托优点：
1.减少js代码浪费，减少js事件的冗余绑定，节约事件资源
2.提高js工作效率
3.可以解决动态添加的原色节点无法绑定事件的问题

        <ul id = 'ul1'>
             <li>111</li>
             <li>222</li>
             <li>333</li>
            
             <div>div111</div>
        </ul>
        <button id = 'btn1'>添加新的li节点</button>

   window.onload = function(){
             var oUl = document.getElementById("ul1");
             oUl.onclick = function(ev){
                 var e = ev || window.event;
                 var target = e.target || window.event.srcElement;
                 if(target.tagName.toLowerCase() == "li"){
                    //这就是我们想要的节点
                    target.style.backgroundColor = 'red';
                }
            }
            		var oBtn = document.getElementById("btn1");
           			 var i = 3;
            		oBtn.onclick = function(){
                    var newLi = document.createElement("li");
                    newLi.innerHTML = i++ * 111;
                    oUl.appendChild(newLi);
            }
        }

那么重点来了事件委托该怎么用呢！！不多xx上代码！

    window.onload = function(){
             1//li 的父节点ul
                    var ul = document.getElementsByTagName("ul")[0];
                    var li = document.getElementsByTagName("li");
                    for (var i = 0; i < li.length; i++) {
                        li[i].index = i;
                    }
              2//li 的父节点ul添加事件
                    ul.onclick = function(e){
                        e = e || event;
                        var target = e.target || e.srcElement;
              3//找到触发对象，如果触发对象，符合条件
                          	if(target.nodeName.toLowerCase() == "li"){
                             	alert(target.index);//获取ul li下的下标
                           	    alert(target.innerHTML);//获取ul li下的内容
        }
    }
}
                        

    <ul id = 'ul1'>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

总结了三个步骤来实现事件委托
1，先去找当前要添加事件得父节点或者祖先节点（上图中的ul）
2，将事件添加给找到得这个节点
3，找到触发对象，如果触发对象，符合条件，进行后续的操作 if(target.nodeName.toLowerCase() == “li”)

哈哈这是我总结了一些时间委托的技巧，不知大家看懂了没，欢迎大佬们提一些宝贵的意见！！下次见
by 凯文