让人省心的事件委托
2014-11-13 12:03
225 查看
事件委托:利用冒泡的原理把实践添加到父元素级别上,触发执行效果。
时间委托优点:
1.提高性能,不用for循环遍历所有li,节省性能。
2.新添加的元素还会有原来之前的事件。
先看时间委托提高的性能吧,一个常见的效果,鼠标经过<li>列表背景变红,鼠标移走取消背景色。下面代码是没使用时间委托:
很显然那个for循环就是性能的主要浪费者,就这5个<li>标签还好,倘若有成千上百个呢?使用时间委托就不用考虑这些了:
这样就不用使用for循环遍历了。
第二个优点:新添加的元素还会有原来之前的事件。也就是说用for循环的方法只能对现有的标签实现效果,对于后来新添加的标签就不能为例了,而用时间委托,只要符合之前设定的标签,那么新添加的标签生来就有之前定义的事件效果。下面在网页中添加一按钮,点击按钮添加一些新的<li>标签:
时间委托优点:
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>
相关文章推荐
- 让人省心的事件委托
- 深入理解C#编程中的组件-事件-委托
- C# 中的委托和事件
- $事件委托
- 委托和事件
- .NET 中的事件与委托
- C# 委托与事件
- Delegate,Action,Func,匿名方法,匿名委托,事件
- 关于委托、事件、处理事件的方法以及.NET 续一个实例
- 委托与事件
- 事件和委托
- C# 中的委托和事件
- 大白话系列之C#委托与事件讲解(一)
- js的事件的代理和委托
- 事件与委托
- C#中委托和事件
- 得到控件事件中的全部委托(C#)
- JavaScript事件代理和委托(Delegation)
- 温故而知新:Delegate,Action,Func,匿名方法,匿名委托,事件
- 委托事件的一两个很好的例子