1、什么是事件委托？

​ 事件委托， 他还有一个名字叫做事件代理，是JavaScript中常用的绑定事件的常用技巧，顾名思义，事件代理即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，

2、为什么要用事件委托?

简单来说就是：

• 访问次数越多，引起浏览器重绘和重排次数就越多，延长整个页面交互就绪事件
• 减少与dom操作的的交互次数，提高性能。

3、事件委托原理：

利用事件冒泡原理来实现，从事件从最深的节点开始，然后逐步向上传播事件。

例如：有这样的一个DOM树，ul>li>a,如果给最里面啊加一个click点击事件，那么这个事件就会一层一层的向外执行，执行顺序a>li>ul，都会冒泡到最外层的ul上，所以会触发，这就是事件委托。

4、实现代码

利用事件委托实现简单选项卡

• 首先肯定是页面结构

  <div class="box" id="boxx"><ul><li><button flagIndex=0>A</button></li><li><button flagIndex=1>B</button></li><li><button flagIndex=2>C</button></li><li><button flagIndex=3>D</button></li></ul><div class="activeBox">A</div><div class="activeBox">B</div><div class="activeBox">C</div><div class="activeBox">D</div></div>

• 原生的方法对于节点的获取以及处理

var active = document.querySelectorAll('.activeBox')
var box = document.getElementById('boxx')

  function act() {for (var i = 0; i < active.length; i++) {active[i].style.display = 'none'}}// 监听点击事件box.addEventListener('click', function (e) {act()//调用封装好的函数let index = e.target.getAttribute('flagIndex')//在dom节点中设置下标，active[index].style.display = 'block'//根据下标设置样式。}, false)

• style样式

      * {margin: 0;padding: 0;}.box {margin: 5px;width: 400px;height: 300px;border: 3px solid #ccc;position: relative;top: 0;}ul {display: flex;}ul li {list-style: none;display: flex;flex: 1;}button {width: 100%;height: 60px;}button:hover {background-color: pink;}.activeBox {width: 100%;height: 240px;background-color: rgb(241, 177, 177);position: absolute;bottom: 0;display: flex;align-items: center;justify-content: center;display: none;}

最终实现效果