JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一跟引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆，试想一下，如果引线不导火了，那鞭炮就只有一响了！！！

　　dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

说到事件冒泡与捕获就不得不提一下两个用于事件绑定的方法addEventListener、attachEvent。当然还有其它的事件绑定的方式这里不做介绍。　

　　addEventListener(event, listener, useCapture)　　

　　　　·参数定义：event---（事件名称，如click，不带on），listener---事件监听函数，useCapture---是否采用事件捕获进行事件捕捉，

　　　　　　　　默认为false，即采用事件冒泡方式

　　　　addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。

　　attachEvent(event,listener)　　

　　　　·参数定义：event---（事件名称，如onclick，带on），listener---事件监听函数。

　　　　attachEvent主要用于IE浏览器，并且仅在IE10及以下才支持，IE11已经废了这个方法了（微软还是挺识趣的，慢慢向标准靠拢）。

说了一箩筐定义，下面就用上面这两个方法通过栗子来解释一下事件捕获与事件冒泡的具体表现行为差异。

事件冒泡

栗1：

<html lang="zh-cn">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>js事件机制</title><style>#parent{width: 200px;height:200px;text-align: center;line-height: 3;background: green;}#child{width: 100px;height: 100px;margin: 0 auto;background: orange;}</style></head>
<body><div id="parent">父元素<div id="child">子元素</div></div><script type="text/javascript">var parent = document.getElementById("parent");var child = document.getElementById("child");document.body.addEventListener("click",function(e){console.log("click-body");},false);parent.addEventListener("click",function(e){console.log("click-parent");},false);child.addEventListener("click",function(e){console.log("click-child");},false);</script>
</body>
</html>

通过"addEventListener"方法，采用事件冒泡方式给dom元素注册click事件，点击子元素会发生什么呢？如果你对事件冒泡有一定了解的话那你肯定知道上面的代码会输出的顺序，没错，如下图所示：

事件触发顺序是由内到外的，这就是事件冒泡，虽然只点击子元素，但是它的父元素也会触发相应的事件，其实这是合理的，因为子元素在父元素里面，点击子元素也就相当于变相的点击了父元素，这样理解对吧？

这里有同学可能要问了，如果点击子元素不想触发父元素的事件怎么办？肯定可以的，那就是停止事件传播---event.stopPropagation();

修改栗1的代码，在子元素的监听函数中加入停止事件传播的操作，栗2

child.addEventListener("click",function(e){console.log("click-child");e.stopPropagation();
},false);

在点击子元素的时候就只弹出了子元素那条信息，父元素的事件没有触发，因为事件已经停止传播了，冒泡阶段也就停止了。

事件冒泡差不多就讲述完了，别急，捕获还没说呢!

事件捕获

栗3，修改栗子1中的代码，给parent元素注册一个捕获事件，如下

　　　　 var parent = document.getElementById("parent");var child = document.getElementById("child");document.body.addEventListener("click",function(e){console.log("click-body");},false);parent.addEventListener("click",function(e){console.log("click-parent---事件传播");},false);　　　　 //新增事件捕获事件代码parent.addEventListener("click",function(e){console.log("click-parent--事件捕获");},true);child.addEventListener("click",function(e){console.log("click-child");},false);

如果你看明白了我前面说的那些，你就知道这个栗子的输出顺序了。

父元素通过事件捕获的方式注册了click事件，所以在事件捕获阶段就会触发，然后到了目标阶段，即事件源，之后进行事件传播，parent同时也用冒泡方式注册了click事件，所以这里会触发冒泡事件，最后到根节点。这就是整个事件流程。

上面介绍了事件冒泡、事件捕获、事件传播，下面讲一下如果通过以上三个知识点进行事件委托

委托在JQuery中已经得到了实现，即通过$(selector).on(event,childSelector,data,function,map)实现委托，一般用于动态生成的元素，当然JQuery也是通过原声的js去实现的，下面举一个简单的栗子，通过js实现通过parent元素给child元素注册click事件

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = function(e){if(e.target.id == "child"){console.log("您点击了child元素")}
}

虽然没有直接只child元素注册click事件，可是点击child元素时却弹出了提示信息。

到这里是不是对js的事件机制有一定的了解了呢？感觉有帮助的话就看看下面的小黄脸，你懂得哦！

如有错误，欢迎指正

如有问题，欢迎提问

转载于:https://www.cnblogs.com/bfgis/p/5460191.html

JavaScript 详说事件机制之冒泡、捕获、传播、委托相关推荐

JavaScript 详说事件流（冒泡、捕获、传播、委托）
事件流事件流描述的是从页面中接收事件的顺序. 标准DOM事件流存在三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 事件捕获:当触发事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元 ...
事件机制（冒泡和捕获）
事件响应链 1.事件的三个阶段: 先捕获,后目标,再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发事件经过所有元素都没有被处理,这个事件消失事件传递的过程只跟文档树的 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
JavaScript知识点之“事件机制”
操作发生时会触发相应的事件,创建一个事件对象,该对象包含了各种事件属性,然后事件以如下顺序进行处理: 1. 捕获阶段:事件先发送到window,然后是document,接着是每一个目标元素的父元素,直 ...
Javascript基础与面向对象基础~第六讲 Javascript中的事件机制
回到目录事件机制,在JS中感觉很容易让人接受,一个鼠标被按下时会发生一些事情,一个键盘的键被抬起时同样可以发生一些事情,这种比喻很容易让人接受,不是吗,呵呵. 下面我将JS中几个主要的事件说一下,然 ...
【JavaScript】JS事件机制学习
常用的事件通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
JavaScript之JS事件机制
JS事件机制一.JS事件机制 1.解释 2.作用 3.内容 3.1 单双击事件 3.2 鼠标事件 3.3 键盘事件 3.4 焦点事件 3.5 页面加载事件 4.注意 5.实例二.衍生思考 1.给合 ...
html事件机制,浅析JavaScript中的事件机制_基础知识
事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任 ...

JavaScript 详说事件机制之冒泡、捕获、传播、委托

JavaScript 详说事件机制之冒泡、捕获、传播、委托相关推荐

最新文章

热门文章