DOM--事件代理（事件委托）

最新推荐文章于 2023-05-29 19:53:41 发布

小狐狸ya

最新推荐文章于 2023-05-29 19:53:41 发布

阅读量238

点赞数

分类专栏： DOM 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_56607109/article/details/126659275

版权

事件代理是一种利用事件对象中目标对象的技术，通过将事件绑定在父级元素来代理子元素的业务。常见于JavaScript前端开发，借助事件冒泡机制。例如，为动态添加的li元素通过ul的事件委托实现点击改变背景颜色。事件委托适用于click等事件，能节省内存，适应动态内容，但过度使用可能导致事件误判。

摘要由CSDN通过智能技术生成

5、事件代理（事件委托）

**事件委托：**是一种设计思想，利用了事件对象中含有的目标对象这个技术来实现的。

无论事件触发时是不是目标对象的监听器，在监听器内部的事件对象中都可以访问这个事件的目标对象，利用这个特点去绑定事件给父级元素，来代理自己元素的业务，这种设计就是事件代理。

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是利用冒泡的原理，把事件加到父级上，触发执行效果。

**例子：**触发每个li来改变他们的背景颜色为红色。

<ul id="ul">
    <li>aaaaaaaa</li>
    <li>bbbbbbbb</li>
    <li>cccccccc</li>
</ul>


<script>
    
    /*  window.onload = function () {
        var oUl = document.getElementById("ul");
        var aLi = oUl.getElementsByTagName("li");
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].onmouseover = function () {
                this.style.background = "red";
            }
            aLi[i].onmouseout = function () {
                this.style.background = "";
            }
        }
    } 
    //上面方法我们就可以做到li上面添加鼠标事件。但是如果说我们可能有很多个li用for循环的话就比较影响性能。
    */

    //事件代理方法
    window.onload = function () {
   
        var oUl = document.getElementById("ul");
        var aLi = oUl.getElementsByTagName("li");