事件委托

什么是事件委托

---

事件委托就是把原本需要绑定在子元素上的响应事件委托给父元素，让父元素来执行。

简单来说就是你一个父元素里边可能会有多个子元素，如下

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

有这样一个需求，你需要为每个li元素绑定响应事件，但是这个li元素可能会动态的增加或者删除，（你不可能每次增加或者删除的时候都要手动去添加响应事件吧，这样太麻烦了）

  <ul>
    <li onclick="clickEvent">1</li>
    <li onclick="clickEvent">2</li>
    <li onclick="clickEvent">3</li>
    <li onclick="clickEvent">4</li>
    <li onclick="clickEvent">5</li>
    <!--增加一个li就需要手动去添加响应事件-->
    <li onclick="clickEvent">6</li>
  </ul>

所以呢，就引申出了这样一个概念：事件委托

有了这一种概念之后，我们可以把上述的例子改写成以下的样子

<ul onclick="clickEvent">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

因为li的父元素是ul，所以我们可以把li的响应事件委托给ul，让ul来执行

事件委托的好处

---

1. 可以减少绑定的次数
2. 后期新添加的元素也可以享用之前委托的事件

事件委托的原理

---

事件委托是利用事件冒泡实现的

触发事件的是谁

---

虽然说响应事件是在父元素上定义的，但实际触发事件的还是子元素

如何找到触发事件的对象

---

<ul onclick="clickEvent">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

ul里这么多li，怎么知道自己想要触发的是哪个li元素的事件呢？

答案是event.target

  let ul = document.querySelector('ul')
  ul.onclick = function (event) {
    console.log(event.target);//打印
  }

event.target 属性返回哪个 DOM 元素触发了事件。

比方说我点击了第3个li元素

返回