事件委托

普通事件绑定

    <ul>
     <li>1</li>
     <li>2</li>
    </ul>
<script>
var list = document.getElementsByTagName("li");
    for(var i = 0; i< list.length; i++){
            list[i].index = i;
            list[i].onclick = function () {
                console.log(this.index+1);
             }
         }
  </script>

事件委托
事件委托的原理:事件冒泡

     var ul_list = document.getElementsByTagName("ul")[0];
        ul_list.addEventListener('click',function (event) {
            // console.log(event.target);
            // 给多个元素同时 绑定相同的功能
            // var s = event.target;
           //  var s = event.target.id;
           var s = event.target.className;
        //     console.log(s.nodeName); 节点名称 是大写
        //     if(s.nodeName.toLowerCase() == "li"){
        //         console.log("da");
        //     }
            //绑定不同的功能
            if(s == "list1"){
                console.log("1");
            }
            if(s == "list2"){
                console.log("2");
            }
        });

事件委托是什么，以及优点
事件委托就是利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件.
即：利用冒泡的原理，把事件加到父级上，触发执行效果。
优点:
1.只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能
2.对于新添加的元素也会有之前的事件（可以把事件帮给未来元素）

来源：CSDN

作者：weixin_46174967

链接：https://blog.csdn.net/weixin_46174967/article/details/104030670