事件委托与事件冒泡

事件委托:将事件处理委托给祖籍元素

事件委托的实现方式：通过事件机制来实现事件委托

// 给几个元素绑定了点击事件
      var wrap = document.querySelector(".wrap");
      wrap.onclick = function (e) {
        //   console.log(this)
        console.log(e.target);
        // 明明给wrap 绑定点击事件；为什么可以 更改子元素样式呢？
        // 因为 触发事件的目标元素是p ,利用事件机制实现的事件委托
        e.target.style.color = "red";
      };在这里插入代码片

事件冒泡

在【目标元素el】上触发事件,如果el的【祖籍元素】绑定了相同的事件，那么也会被触发。直到找到 root 跟元素为止。
执行顺序：目标元素—> 父元素—>祖籍元素

addEventListener() 监听某个元素的事件

参一：事件类型
参二：事件处理函数
参三：事件机制 冒泡或者不同 默认值 false 冒泡 （true 捕获）

 //   child.addEventListener("click", function () {
      //       console.log('child')
      //   }, false);

      //   box.addEventListener("click", function () {
      //       console.log('box')
      //   }, false);
      //   wrap.addEventListener("click", function () {
      //       console.log('wrap')
      //   }, false);
在这里插入代码片