每当事件处理程序指定元素时,将会影响整个页面的性能,原因一是每个处理函数都是对象,会占用更大的内存,原因二是dom访问次数增多,会延迟整个页面的访问时间。
处理方法:
1.事件委托
2.移除无用的事件处理程序
一、事件委托
“事件处理程序过多”的方法就是事件委托,原理是利用了事件冒泡,向高层的标签指定一个处理程序,就可以管理某一类的所有事件。
<ul id = "myul">
<li id = "li1"> one </li>
<li id = "li2"> two</li>
<li id = "li3"> three </li>
</ul>
var list = document.getElementById("myul");
list.onclick = function(event) {
var ev = event || window.event;
var target = ev.target || ev.srcElement;
switch (target.id) {
case "li1":
console.log("li1 had been clicked!");
break;
case "li2":
console.log("li2 had been clicked!");
break;
case "li3":
console.log("li3 had been clicked!");
break;
}
}
当标签<li>被点击之后,click事件会冒泡到ul之上,ul通过event.target判断是哪个<li>被点击,并且执行对应的代码。
此时target获得的是ul的dom树下的末梢节点标签,如果<li>标签不位于末梢节点,且又要监听<li>标签的click事件,那么仅需往上遍历末梢节点标签的父节点便可。
<ul id = "myul">
<li id = "li1">
//p是末梢节点标签
<p>one</p>
</li>
<li id = "li2">
//span是末梢节点标签
<span>two</span>
</li>
//li是末梢节点标签
<li id = "li3">
three
</li>
</ul>
var list = document.getElementById("myul");
list.onclick = function(event) {
var ev = event || window.event;
var target = ev.target || ev.srcElement;
while (target !== list) {
if (target.tageName === "li") {
console.log(target.id + "has been find!")
break;
}
target = target.parentNode;
}
switch (target.id) {
case "li1":
console.log("li1 had been clicked!");
break;
case "li2":
console.log("li2 had been clicked!");
break;
case "li3":
console.log("li3 had been clicked!");
break;
}
}
重点在于while语句,找到<li>标签,然后执行对应代码。
二、移除事件处理程序
有两种情况导致“空事件处理程序”增多
1、元素被删除,但是添加到元素中的事件处理程序未删除。
2、卸载页面时,未处理干净“事件处理程序”