码迷,mamicode.com
首页 > Web开发 > 详细

js事件委托

时间:2015-07-29 22:45:08      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:

 js中的事件委托实际上是指利用事件冒泡机制,将子元素的事件加给(委托)父级元素或是更高级的元素来完成。

事件委托的好处主要有:

1、提高性能。提高性能主要反映为:将子元素多个事件处理转换为一个事件处理,使得占用内存减少,同时节约了处理所需时间

<ul id="items">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

 

question:利用js使得鼠标指向li的时候,该元素背景变红,移开后回复正常

不使用事件委托:

 1 window.onload = function(){
 2   var ul = document.getElementById("items");
 3    var lis = ul.getElementsByTagName("li");
 4 
 5    for(var i=0; i<lis.length; i++){
 6       lis[i].onmouseover = function(){
 7           this.style.background = "red";
 8       }
 9       lis[i].onmouseout = function(){
10           this.style.background = "";
11       }
12    }
13 }

 

使用事件委托:

技术分享
 1 window.onload = function(){
 2      var ul = document.getElementById("items");
 3      var lis = ul.getElementsByTagName("li");
 4        
 5      ul.onmouseover = function(evt){
 6              var evt = evt || window.event;
 7              var target = evt.target || evt.srcElement;
 8              if (target.nodeName.toLowerCase() == ‘li‘) {
 9                  target.style.background = "red";
10              };
11      }
12      ul.onmouseout = function(evt){
13              var evt = evt || window.event;
14              var target = evt.target || evt.srcElement;
15              if (target.nodeName.toLowerCase() == ‘li‘) {
16                  target.style.background = "";
17              };
18      }
19 }
View Code

 

2、为新添加元素默认绑定事件

具体在上述示例中新添加一个元素标签,并给其绑定一个事件从而添加一个新的li元素。并分别查看是否使用事件委托的新添加元素的效果。

js事件委托

标签:

原文地址:http://www.cnblogs.com/mengxuan/p/4687708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!