您的位置：首页 > 其它

让人省心的事件委托

2014-11-13 12:03 148 查看

事件委托:利用冒泡的原理把实践添加到父元素级别上，触发执行效果。

时间委托优点：

1.提高性能，不用for循环遍历所有li，节省性能。

2.新添加的元素还会有原来之前的事件。

先看时间委托提高的性能吧，一个常见的效果，鼠标经过<li>列表背景变红，鼠标移走取消背景色。下面代码是没使用时间委托：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testcss</title>
<style>

</style>
<script type="text/javascript">
window.onload=function(){
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');

for(var i=0;i<oli.length;i++)
{
oli[i].onmouseover=function(){
this.style.background='red';

};
oli[i].onmouseout=function(){
this.style.background='';

};

}

}
</script>
</head>
<body>
<input type='button' value='添加' id='input1'/>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>

很显然那个for循环就是性能的主要浪费者，就这5个<li>标签还好，倘若有成千上百个呢？使用时间委托就不用考虑这些了：

oul.onmouseover=function(ev){

var ev=ev||window.event;

//ev.target代表事件源，事件发生在谁身上谁就是事件源，ev.srcElement是兼容IE
var target=ev.target||ev.srcElement;
<span style="white-space:pre">	</span>//if(target.is("li"))  //判断是否为li标签
if(target.nodeName.toLowerCase()=='li')//判断事件源是否为<li>，目的是为排除<ul>,防止鼠标经过“大的”<ul>时发生变色。
{
target.style.background='red';
}

}
oul.onmouseout=function(ev){

var ev=ev||window.event;
var target=ev.target||ev.srcElement;

if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}

}

这样就不用使用for循环遍历了。

第二个优点：新添加的元素还会有原来之前的事件。也就是说用for循环的方法只能对现有的标签实现效果，对于后来新添加的标签就不能为例了，而用时间委托，只要符合之前设定的标签，那么新添加的标签生来就有之前定义的事件效果。下面在网页中添加一按钮，点击按钮添加一些新的<li>标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testcss</title>
<style>

</style>
<script type="text/javascript">
window.onload=function(){
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
var oinput=document.getElementById('input1');

oinput.onclick=function(){     //点击按钮插入新<li>标签
var oli=document.createElement('li');
oli.innerHTML='我是新标签';  //注意：此句代码应写在appendChild()前面，能节省性能
oul.appendChild(oli);
};

oul.onmouseover=function(ev){

var ev=ev||window.event;
//ev.target代表事件源，事件发生在谁身上谁就是事件源，ev.srcElement是兼容IE
var target=ev.target||ev.srcElement;

if(target.nodeName.toLowerCase()=='li')
{
target.style.background='red';
}

}
oul.onmouseout=function(ev){

var ev=ev||window.event;
var target=ev.target||ev.srcElement;

if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}

}
</script>
</head>
<body>
<input type='button' value='添加' id='input1'/>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</body>
</html>

以上代码运行效果如下图所示，新插入的标签依然与生俱来之前的事件：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航