JS中的事件委托机制

原创 2017年01月03日 17:10:18

简要介绍:基于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)动态添加了相同类型的子元素,如果是采用事件委托,新元素也可以被相同的事件监听到,而采用传

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js事件机制 .pdf

  • 2012-12-21 14:38
  • 192KB
  • 下载

c# 委托和事件机制

  • 2010-05-21 21:34
  • 215KB
  • 下载

js事件流机制

window.onload=function(){ var d1 = document.getElementById("d1");

js事件机制

js事件机制详解

【cocos2d-js官方文档】十七、事件分发机制

简介 游戏开发中一个很重要的功能就是交互,如果没有与用户的交互,那么游戏将变成动画,而处理用户交互就需要使用事件监听器了。 总概: 事件监听器(cc.EventListener) 封装用户的事件...

Cocos2d-JS 事件处理机制

事件处理机制中的三个角色 在Cocos2d-JS引擎时间处理机制中也有这3个角色。 1.事件 事件类是cc.Event,它的类图如图8-1所示,它的子类有cc.EventTouch(触摸事件)、...

JS中事件处理机制

在js中事件的处理分三个阶段 目标阶段 捕获阶段 冒泡阶段(以下未申明均为标准浏览器下) 在DOM2级事件中 ele.addEventListener("click",fn1,true);//...

js事件处理机制的理解

1、js事件机制 js中事件的发生包括捕获和冒泡两个阶段,两个阶段的传播顺序为 捕获:从最外边父元素节点传递至发生事件的元素节点,即由外到内; 冒泡:从发生事件的元素节点传递至最外边父元素节点,...

JS:事件鼠标处理机制

鼠标移入移出事件流程: 鼠标移动到目标元素上时会触发mouseover 事件, 如果继续在目标元素上移动会不断触发mousemove事件, 鼠标移出元素的那一刻,触发mouseout...

JS的事件监听机制

很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)