注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

js中的事件委托  

2014-08-21 17:32:59|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处呢:1,提高性能。


我们可以看一个例子:需要触发每个li来改变他们的背景颜色。
  1. <ul id="ul">
  2. <li>aaaaaaaa</li>
  3. <li>bbbbbbbb</li>
  4. <li>cccccccc</li>
  5. </ul>
复制代码
  1. window.onload = function(){
  2. var oUl = document.getElementById("ul");
  3. var aLi = oUl.getElementsByTagName("li");
  4. for(var i=0; i<aLi.length; i++){
  5. aLi[i].onmouseover = function(){
  6. this.style.background = "red";
  7. }
  8. aLi[i].onmouseout = function(){
  9. this.style.background = "";
  10. }
  11. }
  12. }
复制代码

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变

复制代码
  1. window.onload = function(){
  2. var oUl = document.getElementById("ul");
  3. var aLi = oUl.getElementsByTagName("li");
  4. /*
  5. 这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
  6. ie:window.event.srcElement
  7. 标准下:event.target
  8. nodeName:找到元素的标签名
  9. */
  10. oUl.onmouseover = function(ev){
  11. var ev = ev || window.event;
  12. var target = ev.target || ev.srcElement;
  13. //alert(target.innerHTML);
  14. if(target.nodeName.toLowerCase() == "li"){
  15. target.style.background = "red";
  16. }
  17. }
  18. oUl.onmouseout = function(ev){
  19. var ev = ev || window.event;
  20. var target = ev.target || ev.srcElement;
  21. //alert(target.innerHTML);
  22. if(target.nodeName.toLowerCase() == "li"){
  23. target.style.background = "";
  24. }
  25. }
  26. }
复制代码

好处2,新添加的元素还会有之前的事件。

我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li

如:

  1. <input type="button" id="btn" />
  2. <ul id="ul">
  3. <li>aaaaaaaa</li>
  4. <li>bbbbbbbb</li>
  5. <li>cccccccc</li>
  6. </ul>

 不用事件委托我们会这样做:

复制代码
  1. window.onload = function(){
  2. var oUl = document.getElementById("ul");
  3. var aLi = oUl.getElementsByTagName("li");
  4. var oBtn = document.getElementById("btn");
  5. var iNow = 4;
  6. for(var i=0; i<aLi.length; i++){
  7. aLi[i].onmouseover = function(){
  8. this.style.background = "red";
  9. }
  10. aLi[i].onmouseout = function(){
  11. this.style.background = "";
  12. }
  13. }
  14. oBtn.onclick = function(){
  15. iNow ++;
  16. var oLi = document.createElement("li");
  17. oLi.innerHTML = 1111 *iNow;
  18. oUl.appendChild(oLi);
  19. }
  20. }
复制代码

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

复制代码
  1. window.onload = function(){
  2. var oUl = document.getElementById("ul");
  3. var aLi = oUl.getElementsByTagName("li");
  4. var oBtn = document.getElementById("btn");
  5. var iNow = 4;
  6. oUl.onmouseover = function(ev){
  7. var ev = ev || window.event;
  8. var target = ev.target || ev.srcElement;
  9. //alert(target.innerHTML);
  10. if(target.nodeName.toLowerCase() == "li"){
  11. target.style.background = "red";
  12. }
  13. }
  14. oUl.onmouseout = function(ev){
  15. var ev = ev || window.event;
  16. var target = ev.target || ev.srcElement;
  17. //alert(target.innerHTML);
  18. if(target.nodeName.toLowerCase() == "li"){
  19. target.style.background = "";
  20. }
  21. }
  22. oBtn.onclick = function(){
  23. iNow ++;
  24. var oLi = document.createElement("li");
  25. oLi.innerHTML = 1111 *iNow;
  26. oUl.appendChild(oLi);
  27. }
  28. }
复制代码

ok:

如同在我们用微博中,新发微博照样有之前的鼠标事件。

  评论这张
 
阅读(19)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017