委托模式

委托模式(Entrust):多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求。

事件流就是委托模式的一个典型的例子,事件流从捕获开始,到触发该事件,再到事件冒泡三个阶段。

可以将子元素的事件委托给更高层面上的父元素去绑定执行事件委托是一种提高程序性能,降低内存空间的技术手段,它利用了事件冒泡的特性,只需要在某个祖先元素上注册一个事件,就能管理其所有后代元素上同一类型的事件。
用一个例子来描述委托,先创建一个HTML文档,包含一个容器元素

,以及它的3个子元素。
<div id="delegation">
<button type="button">提交</button>
<button type="button">返回</button>
<button type="button">重置</button>
</div>

然后只要给容器元素注册点击事件,它的3个子元素也就能执行这个点击事件,这其实就是一种委托,再通过事件对象的target属性,就能分辨出当前运行在哪个事件目标上。

var container = document.getElementById("delegation")
container.addEventListener("click",function(event)
{
    event.target;
},false);

使用委托后就能避免对容器中的每个子元素进行事件注册,并且如果在容器中动态添加子元素,新加入的子元素也能使用容器元素上注册的事件,而不用单独绑定一次事件处理程序。做到“预测未来”的作用

currentTarget 和 target的区别
target属性指向的是事件目标,currentTarget指向的是正在处理当前事件的对象,发生事件传播时,target指向的可能不是定义时的事件目标,而currentTarget始终指向定义时的事件目标。
例如target可能指向三个不同的button,而currentTarget始终指向div。

委托模式还能处理一些内存外泄的问题,老版本的IE浏览器的引用计数垃圾回收机制,使得那些队DOM元素的引用没有显性清除的数据会遗留在内存中,除非关闭浏览器,否则无法清除。例如:

<div id="btn_container">
    <button id="btn">demo</button>
</div>
var g = function(id){ return document.getElementById(id)}
g('btn').onclick = function(){
    //g('btn').onclick = null;
    g('btn_container').innerHTML = '触发了事件';
}

为btn的元素添加绑定事件,再触发时,父元素中重置内容,这样将会将按钮自身覆盖掉,然而g变量保存的元素绑定的click事件没有清除,所以这个事件就会泄露到内存中,所以可以在父元素设置内存前显性地清除事件.然而这个清楚事件地语句在一些标准浏览器中是不需要的,因为他们采用标记清除方式管理自身地内存,所以更好的办法是使用委托模式

g('btn_container').onclick = function(e){
    //获取触发事件元素
    var target = e && e.target || window.event.srcElement;
    //判断触发事件元素是否是btn元素
    if(target.id === 'btn'){
        g('btn_container').innerHTML = '触发了事件';
    }
}

委托模式优化了页面中的事件绑定,解决了请求与委托者之间的耦合,通过被委托者接收到的请求的处理后,分发给相应的委托者去处理

设计模式 文章被收录于专栏

设计模式

全部评论

相关推荐

首先讲三个故事,关于牛客的事件一:2024年,牛客上有一对高学历情侣,求职方向与我当时一致,都是嵌入式方向。他们恰好是我的朋友,专业能力和学历背景都很扎实,也因此拿到了不少优质offer。和很多求职者一样,他们把offer情况整理后发在平台上,本意是记录与交流,但很快引发了争议。有声音指责他们“集邮”“不释放名额”,认为这种展示本身就是一种炫耀。最终讨论失控,当事人删除内容,事件也很快被遗忘。事件二:小红书评论区,一条评价获得了不少共鸣:“感觉牛客就是当年那群做题区毕业了开始找工作还收不住那股味,颇有一种从年级第一掉到年纪第二后抱怨考不上大学的味道”,这条评论被水印里这个同学转发到牛客后,评论...
小型域名服务器:当看到别人比自己强的时候,即便这是对方应得的,很多人会也下意识的歪曲解构对方的意图,来消解自己在这本就不存在的比较中输掉的自信,从而平白制造出很多无谓的争论。比如你会在空余时间来写优质好文,而我回家只会暗区突围,那么我就可以作为键盘侠在这里评论你是不是XXXXXXXX。即便我自己都知道这是假的,但只要这没那么容易证伪,那么当你开始回应的时候,脏水就已经泼出去了,后面可能会有更多的人带着情绪来给我点赞,而毫不关注你写的文章内容本身是啥了。
SAGIMA牛马咖啡
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
2025-12-04 17:00
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务