关于事件流,事件冒泡和事件捕获

1.事件流

假设有这样一个场景:

有一个导航条:div > ul > li > a,每个元素块宽高一样,就像是一组同心圆。如果我们点击a元素,那么浏览器会认为单击事件不仅仅发生在a上。换句话说,在我们单击a元素的同事,我们也单击了容器中的其他元素。

事件流描述的是从页面中接收事件的顺序。但有意思的是,IE 和 Netscape 却分别提出了不一样的事件流概念。IE 的事件流是事件冒泡,而Netscape的事件流是事件捕获流。

那么问题来了,什么是事件冒泡?什么是事件捕获?

2.事件冒泡

事件冒泡:就是说事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。

<!DOCTYPE html>
<html>
<head>
         <title>example</title>
</head>
<body>
         <div>click</div>
</body>
<html>   

以上代码,如果我们点击页面中的<div>,那么这个click事件会按照以下顺序传播:

<div>   =>   <body>   =>   <html>   =>   document

3.事件捕获

事件捕获:与事件冒泡差不多完全相反,事件捕获思想是从不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件。

那么如果我们点击页面中的<div>,那么这个click事件会按照以下顺序传播:

document   =>   <html>   =>   <body>   =>   <div>

虽然事件捕获是Netscap唯一支持的事件流模型,但是IE9/safari/chrome/opera/firefox目前都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始传播,但是这些浏览器都是从window对象开始捕获事件的。

那么问题又来了,什么是“DOM2级事件”?

4.DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段--处于目标阶段--事件冒泡阶段。

还是用上面的代码为例:

document   =>   <html>   =>   <body>   =>   <div>   =>   <body>   =>   <html>   =>   document

捕获阶段                              处于目标阶段                    冒泡阶段

在DOM事件流中,实际目标在捕获阶段是不会接收到事件的。这意味着捕获阶段到<body>就停止了。下一个阶段是“处于目标阶段”,即事件在<div>上发生,而这一个阶段被堪称冒泡阶段的一部分。继而冒泡阶段发生,事件传回document。

时间: 2024-10-10 03:58:54

关于事件流,事件冒泡和事件捕获的相关文章

js事件流机制冒泡和捕获

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

事件流,冒泡,捕获,事件委托

js里怎么去监听一个事件? 网页中每一个元素都有可以产生某些触发JavaScript函数的事件,事件是可以被JavaScript侦测到的一种行为 监听方法的参数分别代表什么意思?其中哪些参数关系到js的事件流机制?js事件流机制有哪些工作?工作原理是什么? 第一个参数是,事件类型,例如onclick 第二个参数是,响应的时候所执行的函数 第三个是事件流问题,侦听的三个阶段,捕获阶段 --- 目标阶段 --- 冒泡阶段 此处的参数确定侦听器是运行于捕获,目标还是冒泡 如果将useCapture设置

位置信息 事件流概念 jquery的事件

jQuery 位置信息 jQuery位置信息就是一系列封装好的api. 一.高度和宽度 获取高度 .width 设置高度 .width() 获取宽度 .heigth 设置高度 .heigth 二.innerwidth .innerheigth 获取内部宽 .innerwidth() 设置内部宽 .innerwidth(value) 获取内部高 .innerheigth 获取内部宽 .innerheigth(value) 三 .outwidth. outheigth 获取外部宽 .outwidth

Dom事件流、冒泡、捕获

Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点document→html→body→div这个顺序传播.(给这四个节点绑定事件,事件依次触发的顺序): 冒泡:div元素触发事件时,事件从div→body→html→document这个顺序传播. dom事件流:先捕获,再冒泡.从document开始,到document结束形成一个完整的事件流.

javaScript事件(一)事件流

一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应.典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流 1.事件流感性认识问题:单击页面元素,什么样的元素能感应到这样一个事件?答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面.例子:有三个同心圆, 给每个圆添

javaScript事件流是什么?

一.事件 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间交互的桥梁. 你若触发,我便执行--事件发生,调用它的处理函数执行相应的JavaScript代码给出响应. 典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流 事件流描述的是从页面中接收事件的顺序. 1.事件流感性认识 问题:单击页面元素,什么样的元素能感应到这

JavaScript——事件流(事件冒泡和事件捕获)

1.事件流 当浏览器发展到第4代时,浏览器开发团队遇到了一个问题:页面中的哪个元素会拥有某个特定的事件?当你单击某个按钮时,显然该单击事件并不仅仅发生在按钮上,它还发生在按钮的所有祖先元素上,比如按钮的容器元素,容器元素的父元素,甚至整个页面document.但是,哪个元素最先接收到该事件呢?页面接收事件的顺序又是怎样的呢?由此引出了事件流的概念.事件流描述的就是从页面中接收事件的顺序. 2.两个模型 Netscape和Microsoft给出了两个不同的结论.Netscape说document会

JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 中的事件冒泡与事件捕获</title> </head> <body> <div id="Red" style="width:200px;height:200px;background-color:red;padding:2

js事件捕获,事件冒泡,事件委托以及DOM事件流

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托 事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节