面试题：浏览器事件冒泡、事件捕获

昨天面试问到这个问题，不是回答不上来，而是面试官问我哪个浏览器不支持事件捕获/冒泡。确实忘了，回来记忆，顺便把一些和事件流有关的内容再梳理一遍。

事件冒泡：
从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
从具体的元素到不确定的元素。

事件捕获：
从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
从不确定的元素到具体的元素；

事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡，一共分三个阶段：捕获阶段，目标阶段，冒泡阶段。（W3C标准，当处于目标阶段时事件触发）

** 事件委托/代理**：
由冒泡事件衍生出的事件委托机制,既然事件是冒泡传递的，那可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理。就是将子元素的事件处理程序绑定到父类上，例如常见的ul>li> a列表标签的写法应用。

在一些标准的浏览器中，如Chrome、Firefox等，支持这两种冒泡方式。而事实上，准确的说，是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合：先从顶级节点开始，将事件向下传递至源节点，再从源节点冒泡至顶节点。

而在IE及Opera（以下说的都是老版本的欧朋，新版本的欧朋经检测是支持事件捕获的）下，是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。

IE、Opera的事件绑定函数是attachEvent，而Chrome等浏览器则是addEventListener，而后者比前者的参数多了一个——这个参数是一个布尔值，这个布尔值由用户决定，用户若设为true，则该绑定事件以事件捕获的形式参与，若为false则以事件冒泡的形式参与。

阻止冒泡

div.addEventListener("click',function(e){e.stopPropagation();
},true)
// 这样div的父元素就接收不到事件了

stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。

无论事件流中只有捕获还是事件流中只有冒泡，还是说是事件流中既有捕获还有冒泡，event.stopPropagation()都可以阻止事件流的传播顺序。只要是event.stopPropagation()加在哪里，则到哪里就停止运行，停止捕获或者停止冒泡，简单说是，仍然按照正常的混合机制流程走，只是哪里有e.stopPropagation()则这个流程到哪里就停止了。

stopImmediatePropagation：防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理（对当前节点第二次绑定事件时，不监听）
stopPropagation：防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理

        e=e||window.event;if(e.stopPropagation){e.stopPropagation();//其它浏览器}else{e.cancelBubble=true;//IE浏览器}

可以使用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获,那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？
后者只会阻止冒泡或者是捕获。但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生(从而需要设置取消默认)。

阻止默认事件

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

 e.preventDefault();

面试题：浏览器事件冒泡、事件捕获相关推荐

JS 中的事件冒泡与捕获
本文来源:渔人原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...
vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段 2. js 阻 ...
vue 阻止事件冒泡和捕获
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
事件冒泡、捕获？如何阻止
事件冒泡 <style>div{color: white;font-size: 30px;}.content{width: 400px;height: 400px;background-c ...
JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
JS事件流(事件冒泡事件委托)
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流分为三个阶段: 捕获阶段(从上往下,从外往内) 目标阶段冒泡阶段(从下往 ...
WPF路由事件(冒泡事件和隧道事件)
隧道事件: 在视觉树从上往下,从window->实际源头,一般为被点击的控件. 有preview标注的的都是隧道事件冒泡事件: 在视觉树,丛下往上,点击的控件,一直到最上层(window) ...
【事件流】浅谈事件冒泡事件捕获------【巷子】
首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流.1.什么是事件流?解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受到该 ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
事件注册方法、阻止默认事件、事件对象、事件冒泡:事件委托、事件捕获、重置表单
dom两种注册事件语法 1.点语法注册事件: 事件源.事件类型 = 事件处理函数特点:不能注册'同名事件', 否则会覆盖 2.addEventListener 事件源.addEventListene ...

面试题：浏览器事件冒泡、事件捕获

面试题：浏览器事件冒泡、事件捕获相关推荐

最新文章

热门文章