事件的委派（委托）

刺骨的言语ヽ痛彻心扉 2022-05-26 13:20 138阅读 0赞

一、什么是事件的委派？

事件的委派也叫事件代理，简单理解就是：原本是某个元素需要绑定的事件，现在将这个事件交给别的元素去做，正常我们把它交给父级元素，比如：原本是给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.οnclick=function(event)\{  
var event=event||window.event; //解决兼容性  
if(event.target.getAttribute("class")=="link") //判断点击的是不是a标签  
\{  
alert(event.target.innerHTML); //event对象提供target属性,返回事件的目标节点  
\}

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

//添加按钮点击事件  
 btn.οnclick=function()\{  
var li=document.createElement("li");  
li.innerHTML="<a href='javascript:;' class='link'>新建的超链接</a>";  
fu.appendChild(li);  
\}

</script>