委托设计模式是指当多个对象需要处理同一个事情时，可以将这些事情交由另一个对象统一处理，最为常见的就是事件委托
事件委托
事件委托是把一个元素的响应事件交给另一个元素进行触发
事件委托实现
页面结构
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul>
我们获取到所有的li，在通过循环给每个li使用addEventListener绑定事件
// 获取所有的li元素 const lis = document.querySelectorAll('li'); // 给所有的li元素添加事件,由于通过原生js获取元素方法获取当的是一个伪元素，所以需要使用数组方法转换为真正的数组 Array.from(lis).map((res, index) => { //给li元素添加上点击事件,使用addEventListener可以杜绝变量污染的问题 res.addEventListener('click', function () { console.log(`当前是第${index}个元素触发`); }, false) });
我们这里的列表项只有十个，不算多，如果我们有很多的列表项，不仅循环消耗时间变长了，同时也给每个列表项绑定上了事件，造成了性能的损失以及内存的占用，这里对浏览器来说，这点性能和内存的占用并不会引起什么问题，如果通过js的原生方法appendChild往当前ul元素里面添加列表项，后添加的列表项则没有响应事件，因为响应事件是从页面初始化的时候循环添加的，后续元素发生任何变化都不会触发页面初始化
这里我们可以采用事件委托去解决这个问题，把响应事件委托给列表项的父盒子进行触发响应
// 获取列表项父元素 const ul = document.querySelector('ul'); // 添加点击响应事件，event是事件对象 ul.addEventListener('click', function (event) { //此处是兼容写法 const e = event || window.event, target =e.target||e.srcElement; // 判断是否为列表项触发 if(target.nodeName.toLowerCase()=='li'){ console.log(`当前触发的是第${target.innerHTML}个元素`); } //我们需要把这里的改为true开启事件冒泡，false是只允许事件捕获，true是只允许冒泡 }, true)
事件委托机制是通过事件冒泡进行实现的，当我们点击列表项的时候，事件就会冒泡，冒泡到父元素上面，父元素上面有对应的响应事件就会触发对应的响应事件，响应事件中我们传递了事件对象evenet，我们通过evenet的target属性进行判断是否是当前列表项触发的响应事件，如果是列表项就执行后续操作，就算我们后期往列表盒子中追加列表项，也是不影响触发事件
委托设计模式能够将一个大型任务细分化，然后进行统一管理子任务，提高了性能减少了内存消耗，但是委托设计模式需要根据任务的复杂程度做出对应改变，在一些情况下有可能会出现任务多重委托的操作，容易出现问题
坚持努力，无惧未来！
