javaScript中事件委托机制

什么是事件委托？

事件委托，就是应该自己干的事，交给其他人来干（有点像刘备白帝城托孤有没有？2333)简单来说就是将本来应该触发在A元素身上的事件，绑定到了B元素的身上。像鼠标点击，鼠标移动等都可以通过事件委托来触发。

实际上就是通过冒泡的原理，将应该绑定在子元素身上的事件绑定在父元素或者祖父元素的身上，通过父元素或者祖父元素来触发相应的事件。不多废话，直接撸代码。就拿触发<li>的单击事件来举例吧：

HTML：

<ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
</ul>

比如说想点击<li>弹出其对应的内容，最先想到的就是通过循环直接给每一个<li>添加绑定事件，撸代码就完事了：

<script>
        let list = document.getElementById('list')
        let li = document.getElementsByTagName('li')

        //由于获取到的li是伪数组(可迭代对象)，直接遍历就完事了
        for(let val of li){
            val.onclick = function(){
                alert(this.innerText)
            }
        }
</script>

这样就可以实现在页面中点击li，会弹出对应的内容，既然这样可以实现，又为什么需要事件委托机制呢？

这个就很简单啦，不妨想一想如果一个页面有成千上万个<li>（夸张一下2333），这样通过循环一个一个绑定是不是很消耗性能啊？事件委托机制就能解决这个问题。

前面说过，直接给他的父元素，也就是<ul>绑定一次就完事啦。不多说，继续撸代码：

<script>
        let list = document.getElementById('list')

        list.addEventListener('click',(ev)=>{   
            alert(ev.target.innerText)
        })
</script>

通过上面给父元素<ul>绑定事件的代码，实现了和在每个<li>上绑定事件相同的结果，而且由于只给父元素绑定了事件，可以节省很大的内存空间，提高了事件处理性能。