关闭

JS中的事件委托机制

标签: 事件委托事件监听事件冒泡
378人阅读 评论(0) 收藏 举报
分类:

简要介绍:基于JS的事件冒泡,可以以JS事件委托的方式,在父元素上,给父元素的子元素绑定事件,同时减少事件绑定的时间复杂度。

1.传统的事件监听

HTML结构:

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JS:

window.onload=function(){
    var myUl=document.getElementById('ul');
    var list=myUl.getElementsByTagName('li');
    for(var i=0;i<list.length;i++){
      list[i].addEventListener('click',function(){
        this.style.backgroundColor="black";
      });
    }
  }

我们需要在ul的子元素上绑定事件,这里有一个for循环,循环遍历每一个li,在每一个li上绑定事件。
改li上事件功能很简单,就是点击li时,切换背景颜色。

2.通过事件委托实现事件监听

HTML:

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JS:

window.onload=function(){
   var myUl=document.getElementById('ul');
   myUl.addEventListener('click',function(ev){
     var ev= ev||window.ev;
     if(ev.target.nodeName.toLocaleLowerCase()=='li'){
        ev.target.style.backgroundColor="black";
     }
   });
 }

这就是简单的事件委托,在这个例子中,我们并没有直接在li上绑定事件,而是在li的父元素ul上,绑定了事件,因为ul上的事件,是通过事件冒泡,由li传递到ul,事件的冒泡顺序为:

li——>ul

因此,这里的ul点击事件的ev.target指向的是ul的子元素li。这样我们就简介的在通过ul上绑定事件,不需要遍历li,就能通过事件冒泡机制,在li上绑定事件。

3.事件委托的优点

(1)绑定同类子元素时,不需要循环绑定事件。

(2)动态添加了相同类型的子元素,如果是采用事件委托,新元素也可以被相同的事件监听到,而采用传

统的事件绑定,则新元素上并没有添加相同事件的监听。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:111558次
    • 积分:1720
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:2篇
    • 译文:3篇
    • 评论:17条
    文章分类
    最新评论