文档章节

JavaScript事件代理和委托详解(冒泡)

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/27 16:22
字数 973
阅读 6
收藏 0

JavaScript事件代理
事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性。

这个例子主要取自David Walsh的相关文章(How JavaScript Event Delegation Works)。

假设有一个 UL 的父节点,包含了很多个 Li 的子节点:

?

1

2

3

4

5

6

7

<ul id="list">

 <li id="li-1">Li 1</li>

 <li id="li-2">Li 2</li>

 <li id="li-3">Li 3</li>

 <li id="li-4">Li 4</li>

 <li id="li-5">Li 5</li>

</ul>

当我们的鼠标移到Li上的时候,需要获取此Li的相关信息并飘出悬浮窗以显示详细信息,或者当某个Li被点击的时候需要触发相应的处理事件。

我们通常的写法,是为每个Li都添加一些类似onMouseOver或者onClick之类的事件监听。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function addListenersLi(liElement) {

  liElement.onclick = function clickHandler() {

   //TODO

  };

  liElement.onmouseover = function mouseOverHandler() {

   //TODO

  }

 }

 

 window.onload = function() {

  var ulElement = document.getElementById("list");

  var liElements = ulElement.getElementByTagName("Li");

   for (var i = liElements.length - 1; i >= 0; i--) {

    addListenersLi(liElements[i]);

   }

 }

如果这个UL中的Li子元素会频繁地添加或者删除,我们就需要在每次添加Li的时候都调用这个addListenersLi方法来为每个Li节点添加事件处理函数。

这会造成添加或者删除过程的复杂度和出错的可能性。

解决问题方法是使用事件代理机制,当事件被抛到更上层的父节点的时候,我们通过检查事件的目标对象(target)来判断并获取事件源Li。

下面的代码可以完成想要的效果: 

?

1

2

3

4

5

6

7

8

9

/ 获取父节点,并为它添加一个click事件

document.getElementById("list").addEventListener("click",function(e) {

 // 检查事件源e.targe是否为Li

 if(e.target && e.target.nodeName.toUpperCase == "LI") {

 //

 //TODO

 console.log("List item ",e.target.id," was clicked!");

 }

});

 

在原生js中 event需要做兼容性处理

var e=window.event || e;

var target=e.target || e.srcElement;

为父节点添加一个click事件,当子节点被点击的时候,click事件会从子节点开始向上冒泡。父节点捕获到事件之后,通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息,并作处理。

事件冒泡及捕获
浏览器的事件冒泡机制,对于事件的捕获和处理,不同的浏览器厂商有不同的处理机制,这里介绍W3C对DOM2.0定义的标准事件。

DOM2.0模型将事件处理流程分为三个阶段:

一、事件捕获阶段,

二、事件目标阶段,

三、事件起泡阶段。

如下图:

事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。

事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。

事件起泡:从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。

本文转载自:http://www.jb51.net/article/82099.htm

共有 人打赏支持
大头儿子程序猿
粉丝 0
博文 20
码字总数 3454
作品 0
奉贤
程序员
私信 提问
彻底弄懂JS事件委托的概念和作用

一、写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的。后面...

xiaobiB
08/18
0
0
js中的事件委托或是事件代理详解

起因: 1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的; 2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考; 概述: 那什么...

菜鸟的进阶
2017/10/22
0
0
前端面试之JavaScript

1. JS基本的数据类型和引用类型 基本数据类型:number、string、null、undefined、boolean、symbol -- 栈 引用数据类型:object、array、function -- 堆 两种数据类型存储位置不同 原始数据类...

大灰狼的小绵羊哥哥
08/27
0
0
javaScript事件(一)事件流

javaScript事件(一)事件流 一、事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间的桥梁。 你若触发,我便执行——事件发生...

蜗牛奔跑
2015/06/24
0
0
《高性能javascript》 领悟随笔之-------DOM编程篇(二)

《高性能javascript》 领悟随笔之-------DOM编程篇二   序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档。DOM编程性能一直以来都...

grootzhang
2016/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ui2code中的深度学习+传统算法应用

背景 在之前的文章中,我们已经提到过团队在UI自动化这方面的尝试,我们的目标是实现基于 单一图片到代码 的转换,在这个过程不可避免会遇到一个问题,就是为了从单一图片中提取出足够的有意...

阿里云官方博客
43分钟前
2
0
1-2 【包子mysql系列】, 对mysql的innoDB加锁分析

innoDB的事务,是基于锁来实现的,用到事务不自然就会用到锁,而如果对锁理解的不通透,很容易造成线上问题。 数据库加锁的分析,和事务的引擎,隔离级别,索引,主键索引都有关系, 如果去考...

爱吃大肉包
56分钟前
0
0
插入排序

/** * 插入排序 * @Title: insert * @Description: TODO(这里用一句话描述这个方法的作用) * @param 参数 * @return void 返回类型 * @throws */ static void insert(int[] arr ){ for(int i......

yzzzzzzzz
59分钟前
3
0
python Kmeans算法解析

一. 概述 首先需要先介绍一下无监督学习,所谓无监督学习,就是训练样本中的标记信息是位置的,目标是通过对无标记训练样本的学习来揭示数据的内在性质以及规律。通俗得说,就是根据数据的一...

终日而思一
59分钟前
4
0
Nginx+Keepalived实现站点高可用

Nginx+Keepalived实现站点高可用

吴伟祥
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部