事件委托

事件委托是把一个元素的响应事件交给另一个元素进行触发

事件委托实现

页面结构

<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属性进行判断是否是当前列表项触发的响应事件，如果是列表项就执行后续操作，就算我们后期往列表盒子中追加列表项，也是不影响触发事件

委托设计模式能够将一个大型任务细分化，然后进行统一管理子任务，提高了性能减少了内存消耗，但是委托设计模式需要根据任务的复杂程度做出对应改变，在一些情况下有可能会出现任务多重委托的操作，容易出现问题

坚持努力，无惧未来！

JavaScript设计模式-委托模式（5）

事件委托

事件委托实现