事件委托是什么？如何确定事件源？

概述：

把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。其原理是 DOM 元素的事件冒泡。

当父元素监听到事件冒泡之后，会匹配事件源对象，就是该由哪个子元素来触发事件

---

应用场景？

• 当**子元素是动态创建**时

如果直接将事件绑定到子元素上，由于静态文件先渲染完成，动态的元素后获取到的，因此绑定不上去，这时就可以通过事件委托来绑定到父元素上。

• 当新增子对象时

如果用了事件委托，在新增子对象时就无需再添加事件绑定了

• 节省内存，减少事件注册

比如给

下的所有
• 标签绑定事件，如果用事件委托，就只给
  绑定就可以了。

  注意
  不是说委托给的父元素越靠近顶层越好，因为事件冒泡是有一个过程的，越靠近顶层，事件传播链越长，消耗时间就越长

  ---

  如何确定事件源？

  给个栗子：

  要委托的父元素是一个

  ，子元素为 N 个

  • 注意：

    • 事件委托，在确定事件源对象时有兼容问题–
    • event.target 获取标准浏览器的事件源
    • event.srcElement  获取 IE 浏览器的事件源

    以下代码中采用了兼容写法

    var oUl = document.getElementById("ul");
    //oUl点击事件
    oUl.onclick = function (evt) {
      //事件兼容
      var e = evt || window.event;
      //获取事件源target兼容
      var target = e.target || e.srcElement;
      //事件源的节点名称大写为LI，获取li元素
      if (target.nodeName.toupperCase() === "LI") {
        alert(target.innerHTML); //业务逻辑
      }
    };

    参考：
    JS 获取事件源 | CSDN