让人省心的事件委托
2014-11-13 12:03 勤劳的插秧哥 阅读(142) 评论(0) 编辑 收藏 举报事件委托:利用冒泡的原理把实践添加到父元素级别上,触发执行效果。
时间委托优点:
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>以上代码运行效果如下图所示,新插入的标签依然与生俱来之前的事件: