JS中的事件委托和移除事件处理程序

1.什么是事件委托？

对“事件处理程序过多”的问题的解决方案就是事件委托。事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到documeng层次，也就是说我们可以为整个页面指定一个onclick事件处理程序，而不必给每一个可单击的元素分别添加事件处理程序。如下代码：

//html
<ul id="myLinks">
<li id="goSomewhere">GO Somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayhi"> Say Hi</li>
</ul>
//js
var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3= document.getElementById("sayhi");
item1.addEventListener("click",function(){
location.href="http://www.hao123.com";
},false);
item2.addEventListener("click",function(){
document.title="事件委托";
},false);
item3.addEventListener("click",function(){
alert("Hi");
},false);

这是传统的方式为每个li元素添加事件处理程序，但是如果在一个复杂的web应用程序中，对所有可点击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时可以使用事件委托技术解决这个问题，只需要在DOM树种尽量高的层次上添加一个事件处理程序，如下：

var list=document.getElementById("myLinks");
list.addEventListener("click",function(event){
switch(event.target.id){
case "goSomewhere":
location.href="http://www.hao123.com";
break;
case "doSomething":
document.title="事件委托";
break;
case "sayhi":
alert("Hi");
break;
}
},false)

在这段代码中，我们使用事件委托只为ul元素添加了一个onclick事件处理程序，由于所有可单击的元素都是它的子元素，所以都会冒泡到父元素，最终被父元素上的事件处理程序解决。这种技术的好处在于占用内存更少，所耗费的时间更少。所以用到按钮的事件都可以用事件委托技术。

2.移除事件处理程序

内存中留有那些过时不用的“空事件处理程序”，是造成web应用程序内存和性能问题的主要原因。因此在不需要的时候事件处理程序，就可以移除它。
例如当代有事件处理程序的元素被innerHTML删除了，那么原来添加到元素的事件处理程序极有可能无法被当作垃圾回收。

<div id="mydiv">
<input type="button" id="mybtn" />
</div>
var btn=document.getElementById("mybtn");
btn.onclick=function(event){
document.getElementById("mydiv").innerHTML="变化了";
}

当按钮被移除时，他还带着一个事件处理程序呢，在div元素上设置innerHTML可以把按钮一周，但事件处理程序仍然与按钮保持引用关系。所以当你知道哪些元素被移除，最好手工移除对应事件处理程序。

var btn=document.getElementById("mybtn");
btn.onclick=function(event){
btn.onclick=null;
document.getElementById("mydiv").innerHTML="变化了";
}

在此我们在设置innerHTML属性之前，先移除按钮的事件处理程序。这样就确保内存可以被再次利用。

最后

以上就是花痴早晨为你收集整理的JS中的事件委托和移除事件处理程序的全部内容，希望文章能够帮你解决JS中的事件委托和移除事件处理程序所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。