委托模式

如果存在多个对象接收并处理同一请求，可以将请求委托给另一个对象统一处理，就叫做委托模式。

使用场景

在 JavaScript 中，委托模式有着很广泛的应用，最典型的就是“事件委托”。
事件委托就是将子元素的事件委托给父元素，然后通过事件冒泡传递，再通过判断事件来源来执行某种操作的一套逻辑。
比如，当用户点击每个列表项的时候，都将打印出相应的文字：

例子：

<ul>
  <li onclick="clickFn()">A</li>
  <li onclick="clickFn()">B</li>
  <li onclick="clickFn()">C</li>
</ul>

<script>
  const clickFn = () => {
    console.log(event.target.innerText);
  };
</script>

上例中，将事件直接绑定在 li 元素上，会增加多个事件，内存消耗也相应变大。如果将事件挂载到父元素 ul 上，只需要一个点击事件，就可以起到相同的作用，优化了页面性能。

例子：

<ul onclick="clickFn()">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<script>
  const clickFn = () => {
    if (event.target.nodeName === 'LI') {
      console.log(event.target.innerText);
    }
  };
</script>

事件委托不仅可以优化页面性能，也可以间接实现动态添加事件的功能。
比如我们想为新创建的 p 元素添加点击事件，就可以将事件挂载到其父元素上：

例子：

<button onclick="addCountry()">Add Country</button>
<div onclick="bgChange()"></div>

<script>
  const countrys = ['俄罗斯联邦', '越南社会主义共和国'];
  let i = 0;

  const addCountry = () => {
    if (i === countrys.length) {
      return;
    }
    const p = document.createElement('p');
    p.innerText = countrys[i++];
    document.querySelector('div').appendChild(p);
  };

  const bgChange = () => {
    if (event.target.nodeName === 'P') {
      event.target.style.backgroundColor = 'aqua';
    }
  };
</script>

---

如有错误，欢迎指正，本人不胜感激。