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

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

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

JavaScript 事件委托

转自:http://www.html-js.com/article/JavaScript-JavaScript-the-event-delegate-to-implement-event-can-be...

对于原生js中的事件委托解析

js中事件委托,以及事件委托可以使用的原理。

JavaScript事件代理和委托(Delegation)

目录(?)[-] JavaScript事件代理事件冒泡及捕获jQuery和Dojo中delegate函数优点在JavaScript编程中使用代理 在javasript中dele...

根据jquery解密js事件委托机制

Javascript一个重要特点就是事件驱动模型,javascript和HTML之间的交互是通过事件是实现的,事件就是文档或浏览器窗口发生的一些特定的交互瞬间,可以使用事件处理程序来预定事件,以便事件...

js事件机制 .pdf

  • 2012年12月21日 14:38
  • 192KB
  • 下载

node.js的事件机制

通常js给我们的第一映像就是运行在kehudua

Node.js的事件机制

原文地址: http://www.infoq.com/cn/articles/tyq-nodejs-event    Node.js在其Github代码仓库(https://github.com/j...

JS中的异步以及事件轮询机制

一、JS为何是单线程的?      JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。(在JAV...

cocos2d-js v3.0 新功能-----事件分发机制

事件分发机制 简介 在使用时,首先创建一个事件监听器,事件监听器包含以下几种: 触摸事件 (cc.EventListenerTouch)键盘响应事件 (cc.EventListene...

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

游戏开发中一个很重要的功能就是交互,如果没有与用户的交互,那么游戏将变成动画,而处理用户交互就需要使用事件监听器了。 总概: 事件监听器(cc.EventListener) 封装用户的事件...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS中的事件委托机制
举报原因:
原因补充:

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