事件委托

最新推荐文章于 2024-09-30 03:35:25 发布

diaodundi4858

最新推荐文章于 2024-09-30 03:35:25 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/tianxiaoxiao/p/9917372.html

版权

适用于对一组元素添加一类事件
优势：

减少了页面中函数的数量，提升页面性能
事件委托，对新增加的元素也起作用，更易于维护，页面元素变化时，不用再次添加事件
原理：事件冒泡原理，子元素会向上级传递事件

    <div>
        <button id="btn">添加</button>
        <ul id="ul">
            <li>111</li>
            <li id="2">222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </div>

      <script>
         window.onload=function(){
            var oUl=document.querySelector('#ul');
            oUl.onclick=function(event){
                console.log(arguments);
                var target=event.target;
                console.log(target); //获取节点的属性
                console.log(target.nodeName);
                console.log(target.nodeType);
                console.log(target.nodeValue); //元素节点的value值为null
            }

            var oBtn=document.querySelector("#btn");
            var num=4;
            oBtn.onclick=function(){
                num++;
                var oli=document.createElement("li")
                oli.innerHTML=`<li>${num*111}</li>`;
                oUl.appendChild(oli);
            }
        }
    
    </script>

点击事件的参数