事件的委派(委托)

一、什么是事件的委派?

        事件的委派也叫事件代理,简单理解就是:原本是某个元素需要绑定的事件,现在将这个事件交给别的元素去做,正常我们把它交给父级元素,比如:原本是给li绑定点击事件,现在交给它父级ul绑定,利用冒泡原理,点击li的时候会触发ul的事件;

二、事件委派有什么好处?

        1.提升性能: 比如要给100个li安装点击事件,正常我们会用for循环去个每个li安装,这样与访问dom的次数就多了,性能也就比较低;利用冒泡原理,我们给ul安装点击事件(就是委派ul代理这个事件),点击li的事件由ul去执行,这样我们就只访问一次dom,性能就提升了;

        2.能绑定新添加标签的事件:什么意思? 比如用for给10个li绑定了事件,然后现在又添加了新的li,这样新添加的li就没有绑定到了;此时我们委派ul去绑定事件,点击新添加li也是会触发这个事件的;

三、事件委派的例子(看完例子应该更容易理解)

<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
</ul>

<script type="text/javascript">
var fu=document.getElementById("u1");
var btn=document.getElementById("btn01");                        

//由于冒泡原理,点击ul下面的标签,会触发到ul的事件,所以给ul委派点击事件
/**************************事件的委派开始**********************************/

fu.onclick=function(event){
    var event=event||window.event; //解决兼容性
    if(event.target.getAttribute("class")=="link") //判断点击的是不是a标签
    {
        alert(event.target.innerHTML); //event对象提供target属性,返回事件的目标节点
    }
    
}

/**************************事件的委派结束**********************************/

// 新增li元素,由于事件委派,新增元素也会触发父元素的点击事件
btn.onclick=function(){
    var li=document.createElement("li");
    li.innerHTML="<a href='javascript:;' class='link'>新建的超链接</a>";
    fu.appendChild(li);
}

</script>

### JavaScript 中事件委托的概念 事件委托是一种利用事件冒泡机制的技术,通过将事件监听器绑定到父级元素上而不是子元素本身来处理多个子元素上的相同事件[^1]。这种方法不仅减少了内存占用,还使得动态添加的子节点能够自动继承相同的事件行为。 #### 事件冒泡原理 当某个 DOM 节点触发了一个事件时,该事件会沿着 DOM 树向上传播至根节点,这一过程称为 **事件冒泡**。如果希望捕获这些传播中的事件,则可以在祖先节点上设置监听器并判断实际触发事件的目标节点[^2]。 ```javascript document.getElementById('parent').addEventListener('click', function(event) { if (event.target && event.target.matches('.child')) { console.log('Child element clicked!'); } }); ``` 上述代码展示了如何在一个容器(`#parent`)上应用点击事件监听器,并仅在目标是 `.child` 类型的子项时执行特定逻辑[^3]。 #### 实现方式 要实现事件委托需注意以下几点: - 将事件处理器附加于共同的上级组件而非单独每个项目之上; - 使用 `event.target` 来识别具体哪个子元素引发了当前事件; - 对应业务需求编写条件分支决定响应动作[^4]。 这种技术特别适用于列表项或其他大量重复结构的数据展示场景下,既简化了初始加载阶段的工作量又增强了后期维护便利度[^5]。 ### 总结 采用事件委派可以有效减少直接挂载在各个独立控件上的侦听函数数量从而优化性能表现;同时它也提供了良好的灵活性支持后续新增内容无需额外重新注册回调方法即可正常运作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值