【事件流】事件冒泡和事件捕获

事件流:

  通俗的说就是:元素触发时,传播的过程。

冒泡型事件流:事件的传播是从最具体的事件目标到最不具体的事件目标。即从DOM树的叶子到根。

       <div>—》<body>—》<html>—》document

捕获型事件流:事件的传播是从最不具体的事件目标到最具体的事件目标。即从DOM树的根到叶子。

       document—》<html>—》<body>—》<div>

事件流包括三个阶段:

事件捕获阶段:实际目标(<div>)在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>再到<body>就停止了。

处于目标阶段:事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。(这一点要注意一下哈!)

冒泡阶段:事件又传播回文档。

原文地址:https://www.cnblogs.com/cassia/p/10167303.html

时间: 2024-10-23 06:03:41

【事件流】事件冒泡和事件捕获的相关文章

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

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

1.事件流 假设有这样一个场景: 有一个导航条:div > ul > li > a,每个元素块宽高一样,就像是一组同心圆.如果我们点击a元素,那么浏览器会认为单击事件不仅仅发生在a上.换句话说,在我们单击a元素的同事,我们也单击了容器中的其他元素. 事件流描述的是从页面中接收事件的顺序.但有意思的是,IE 和 Netscape 却分别提出了不一样的事件流概念.IE 的事件流是事件冒泡,而Netscape的事件流是事件捕获流. 那么问题来了,什么是事件冒泡?什么是事件捕获? 2.事件冒泡

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

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