js事件委托利用

事件委托是什么呢？事件委托在实际编写代码中又有什么优势呢？

事件委托的原理是事件冒泡，最重要的功能就是提高程序运行效率。

事件冒泡是什么呢？

事件流分为两种一种是事件冒泡另一种是事件捕获。

事件冒泡：从子节点开始执行，由里向外逐级触发，直到查找到根节点。
事件捕获：从根节点开始执行，由外向里逐级触发，直到查找到当前目标节点。

事件冒泡的小案例

html代码部分，并且添加一点默认样式

        <div id = 'div1' style="height: 400px; width: 400px; padding: 30px; background-color: red;">
            爷爷节点
            <div id = 'div2' style="height: 300px; width: 300px; padding: 30px; background-color: green;">
                父节点
                <div id = 'div3' style="height: 200px; width: 200px; padding: 30px; background-color: yellow;">
                    子节点
                </div>
            </div>
        </div>

页面呈现效果
js事件委托利用
js代码部分

            window.onload = function(){
                // 获取到所有DIV节点
                var aDivs = document.getElementsByTagName("div");
                
                // 通过循环给所有div添加点击事件，让其输出自身的id名
                for(var i = 0; i < aDivs.length; i++){
                    aDivs[i].onclick = function(){
                        console.log(this.id);
                    }
                }
            }

只点击div3也就是子节点时的页面效果
js事件委托利用

总结：当你点击div3的时候他不光输出了他自身的id，而且还逐级向上进行冒泡，输出其父节点的id,爷爷节点的id，这就是事件冒泡。

原理都搞明白了，那么为什么要用事件委托呢？

通常我们动态添加的节点不会拥有前面已经添加好的事件，如果想要让他拥有与之前同样的事件，还需要再添加一遍，但是如果使用事件委托，那么动态添加的节点也会拥有之前的事件。

如何实现事件委托？

1、首先找到需要添加行为的节点的父节点或父节点的父节点.
2、将你需要添加的事件绑定到父节点上
3、获取到触发对象，判断是否符合要求，如果是则进行后续操作

让我们用个案例来看一下js事件委托利用

html代码部分

		<button id="btn1">添加内容</button>
        <ul id="ul1">
            <li>
                <span>我是原内容</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是原内容</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是原内容</span>
                <button>删除</button>
            </li>
        </ul>

默认页面效果
js事件委托
JS代码部分

            window.onload = function(){
                var oUl = document.getElementById("ul1");
                var oBtn = document.getElementById("btn1");

                // 按钮点击事件 添加内容
                oBtn.onclick = function(){
                    var newLi = document.createElement("li");
                    var newSpan = document.createElement("span");
                    var newBtn = document.createElement("button");
                    // 将新建内容添加到页面
                    newSpan.innerText = "我是新建的内容";
                    newBtn.innerHTML = "删除";
                    newLi.appendChild(newSpan);
                    newLi.appendChild(newBtn);
                    oUl.appendChild(newLi); 
                }
                // 事件委托ul 点击button子节点时 删除当前列表内容
                oUl.onclick = function(ev){
                    var e = ev || window.event;  //获取点击对象 IE浏览器兼容
                    var target = e.target || window.event.srcElement; //触发对象 IE浏览器兼容

                    // 判断点击的子节点是否为button
                    if(target.tagName == "BUTTON" && target.innerHTML == "删除"){
                        // 如果是 就删除这个节点
                        oUl.removeChild(target.parentNode);
                    }
                }
            }