捕获冒泡

在W3C事件模型中,任何事件会首先被捕获直至到达目标元素然后再冒泡回去。事件流包括3个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
Web开发者可以选择将事件处理程序注册在捕获或者冒泡阶段。这可以通过addEventListener()方法来实现。如果该方法传入的最后一个参数值为true,表示事件处理程序被注册在捕获阶段,如果为false表示件处理程序被注册在冒泡阶段。

假设有如下程序(childEle是parentEle的子元素):

1.parentEle.addEventListener("click", parentDoSomething, true);

2.childEle.addEventListener("click", childEleDoSomething, false);

如果用户点击子元素childEle会发生如下事情:

a、点击事件开始于捕获阶段。它会先查询是否有childEle的任何祖先元素在捕获阶段绑定了onclick事件。

b、它发现祖先元素1在捕获阶段绑定了onclick事件,于是parentEle.parentDoSomething()首先被执行。

c、事件一直查询到目标元素childEle都没有再发现别的在捕获阶段绑定的onclick事件,事件转到它的冒泡阶段并执行childEleDoSomething()(注册在childEle上的在冒泡阶段执行的事件处理程序)。

d、事件再次向上查询并检查是否有任何祖先元素在冒泡阶段绑定了onclick事件,并没有查询到,所以什么都没有发生。
再看相反的例子:

1.parentEle.addEventListener("click", parentDoSomething, false);

2.childEle.addEventListener("click", childEleDoSomething, false);

现在如果用户点击childEle,下面的事情会按顺序发生:

a、点击事件发生于捕获阶段。事件查询childEle是否有任何祖先元素在捕获阶段绑定了onclick事件并且没有查找到这样的元素。

b、事件查询到目标元素childEle自己。事件转为冒泡阶段并执行childEleDoSomething()。

c、事件再次向上查询并检查目标元素是否有任何祖先元素在冒泡阶段绑定了onclick事件。

d、它找到了满足条件的parentEle,然后执行parentDoSomething()。所以选项C是错的,应该是fn2先触发。

因为IE没有提供对事件捕获阶段的支持,所以IE跟标准浏览器对于DOM事件流实现不一样。

document.querySelector、document.querySelectorAll
document.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。document.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。这两个方法都可以接受三种类型的参数:id(#),class(.),标签,很像jquery的选择器。如:
var obj = document.querySelector("#id");
var obj = document.querySelector(".classname");
var obj = document.querySelector("div");
var el = document.body.querySelector("style[type=‘text/css‘], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");

IE使用attachEvent/detachEvent方法来添加和删除事件监听器;w3c使用addEventListener/removeEventListener方法。
IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。
IE没有提供对事件捕获阶段的支持。
要想阻止冒泡,在Microsoft模型中,需要将事件的cancelBubble属性设置为true。在W3C模型中,需要调用事件的stopPropagation()方法。
这两种方法阻止了事件的所有冒泡。如果想解决浏览器兼容问题,可以像下面这样写:

function doSomething(e){

e = window.event || e;

e.cancelBubble = true;

if(e.stopPropagation){

e.stopPropagation();

}

}
在不支持cancelBubble属性的浏览器中设置它的值并不会报错。浏览器会忽略它并创建这个属性。当然,它并不能真正地阻止冒泡,但是给它分配值的操作本身是安全的。

javascript对象有两种不同的属性来源,一个是对象自身属性,另一是继承于原型链上的属性。
每个JavaScript对象都继承一个原型链,而所有原型都终止于Object.prototype。注意,这种继承是活动对象之间的继承。它不同于继承的常见概念,后者是指在声明类时类之间的发生的继承。因此,JavaScript继承动态性更强。它使用简单算法实现这一点,如下所示:当您尝试访问对象的属性/方法时,JavaScript将检查该属性/方法是否是在该对象中定义的。如果不是,则检查对象的原型。如果还不是,则检查该对象的原型的原型,如此继续,一直检查到Object.prototype。

时间: 2024-08-03 21:09:03

捕获冒泡的相关文章

javascript——事件捕获冒泡

事件冒泡:obj.addEventListener(eventType ,fn ,false); false => 冒泡(出来) 事件捕获:obj.addEventListener(eventType ,fn ,true); true => 捕获(进去) HTML部分: <div id="div1"> div1 <div id="div2"> div2 <div id="div3">div3<

JS之捕获冒泡和事件委托

一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒泡和捕获则描述了两种不同的顺序. DOM2级事件规定事件流包括三个阶段,如图: 假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document,如上图 为了兼容更多的浏览器,非特殊情况一般

Js冒泡事件和捕获事件

js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获事件:捕获事件是从页面的最上层到被绑定元素都会触发. IE只支持事件冒泡,不支持事件捕获 冒泡事件和捕获事件的方向是相反的. 形式如下图所示: 一般为浏览器中的元素绑定事件有2种方式: 一.直接在页面元素中进行绑定,此方式采用的是冒泡排序,如: <div id="eventExample&qu

js中冒泡事件和捕获事件

js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获事件:捕获事件是从页面的最上层到被绑定元素都会触发. IE只支持事件冒泡,不支持事件捕获 冒泡事件和捕获事件的方向是相反的. 形式如下图所示: 一般为浏览器中的元素绑定事件有2种方式: 一.直接在页面元素中进行绑定,此方式采用的是冒泡排序,如: <div id="eventExample&qu

js事件流机制冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netscape --> 事件捕获流 查看源码:DOM2事件-捕获-冒泡 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 我们先来个简单的例子,这是HTML结构 <!DOCTYP

事件对象、事件流、关于冒泡、默认行为

事件对象: 在触发事件的时候,会产生一个事件对象event,这个对象中包含了与事件相关的信息. 例如:在触发鼠标双击时,是触发了这几件事  onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick 事件流: 当HTML元素产生一个事件时,这个事件会在元素节点与根节点之后的路径传播,路径所经过的节点都会接收到这个事件,这个传播过程称为DOM事件流. DOM事件流分为冒泡事件流和捕获事件流. 事件冒泡: 当一个元素的事件被触发时,同样的事件将会在该元素的

移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ie6到10) 2.事件名称有on 3.事件函数执行的顺序:标准ie->正序 非标准ie->倒序 4.this指向window 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 1.有捕获 2.事件名称没有on 3.事件执行的顺序是正序 4.this触发该事件的对象

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --

原生javascript详解

JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一下了. 首先声明,小菜懂的也不是很多,只是把我的思路和大家分享一下. DOM0事件模型 事件模型在不断发展,早期的事件模型称为DOM0级别. DOM0事件模型,所有的浏览器都支持. 直接在dom对象上注册事件名称,就是DOM0写法,比如: 1 document.getElementById("tes