【前台】JavaScript中的委托

以你之姓@ 2022-06-15 23:10 175阅读 0赞

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

# 简介 #

委托，顾名思义，就是事情让别人去做，在JavaScript中，事件委托也称事件代理，其中用到的机制为事件冒泡。

# Demo代码 #

# 事件冒泡和事件捕获 #

根据上面的Demo代码，画出如下Dom树：

![Center][]

事件捕获：父级元素先触发， 子级元素后触发！父级元素激活后，层层向下寻找，捕获事件。

事件冒泡：子级元素先触发，父级元素后触发！子级元素激活后，依次向上寻找父级元素，寻找被触发的事件。

# 未使用委托 #

假如，要实现点击li标签，触发click事件，给对应的li标签变颜色。想要给每一个li标签添加click事件，则需要循环遍历，去添加该事件，但是当li标签有很多的时候，性能自然就会降低。js控制如下：

# 使用委托 #

将事件绑定到li标签的父级元素上，当点击li标签时，根据事件冒泡原理，寻找li标签的父级元素，将事件委托给li标签的父级元素去执行！js控制如下：

window.onload = function(){
    		$("#ul").delegate("li","click",function(){
    			this.style.background = "red";
    		});
    	}

委托的三元素：绑定的标签，事件，方法。

# 适用场景 #

1.当标签是动态添加时，简单的事件绑定是绑定到html中已有的dom上，当有些标签是动态添加的时候，使用委托同样可以将事件添加到新增加的dom上。

2.简单绑定是将事件绑定到一个标签上，委托可以用到管理一类型的时间上，就如上例，管理一类li标签的click事件。这样只需要绑定一次，假如我们有1000个标签，那用简单的绑定就需要绑定1000次，性能只差可想而知。

[http_www.captainbed.net_zhanghan]: http://www.captainbed.net/zhanghan
[Center]: /images/20220616/3fab0d72bfeb44318549ac89e8ba9cd0.png

还没有评论，来说两句吧...