JS事件委托

**事件委托**

事件委托：利用事件的冒泡，把子元素的事件绑定在一个共同的父元素身上

优点：

1、减少元素的的事件绑定

2、减少 dom 操作，提高性能

3、对于新添加进来的元素也可以执行事件，不需要重新绑定

例如：

==>把所有 li 身上需要绑定的事件给一个共同的结构父级

==>绑定 ul

==>事件目标

->如果点击在 ul 上，target 就是 ul

->如果点击在 li 上，target 就是 li

==>通过事件目标判断点击是 li

->if(元素节点.nodeName===大写标签名){}

->

    <script>

      //获取ul, li

      var ul = document.querySelector("ul");

      var lis = document.querySelectorAll("li");

        var btn = document.querySelector("button");

      btn.onclick = function () {

        //插入结点的方式

        var li = document.createElement("li");

        li.innerText = "新来的";

        ul.appendChild(li);

        //innerHTML

        //完全覆盖式写入

       // ul.innerHTML=ul.innerHTML+'<li><新来的/li>'

      };

      //事件委托

      ul.onclick = function (e) {

        e = e || window.event;

        var target = e.target || e.srcElement;

        console.log(target);

        if (target.nodeName === " LI") {

          console.log("点击le", target);

        }

      };

    </script>

**注意**

==>注意在父级的事件处理函数里面用事件目标去判断

==>事件目标的兼容处理

==>如果判断的是 nodeName 或者 tagName,注意是大写标签名