js中的事件委托

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;
        }

最终实现效果