HTML Dom事件传播:冒泡与捕获探究

AI炼丹师
• 阅读 1316

事件的传播:

*关于事件的传播网景公司和微软公司有不同的理解。

-微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。

-网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件.然后在向内传播给后代元素。

-W3C 综合了两个公司的方案,将事件传播分成了三个阶段(现在浏览器执行的默认标准):

1.捕获阶段:在捕获阶段时,从最外层的祖先元素,向目标元素进行事件的捕获.但是默认此时不会触发事件 。
2.目标阶段:事件捕获到目标元素,捕获结束,开始在目标元素上触发事件 。
3.冒泡阶段:事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件。
HTML Dom事件传播:冒泡与捕获探究
HTML Dom事件传播:冒泡与捕获探究

点赞
收藏
评论区
推荐文章
Dax Dax
4年前
jQuery 的事件绑定和事件委托(事件代理)
简单以jQuery的on()方法为例说明:API:1.on(events,selector,data,handler) 如果on()方法的selector参数为空,事件处理程序就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素,译者注)发生事件时,无论这个事件发生在这个元素上还是从内层元素经冒泡而
Karen110 Karen110
4年前
盘点JavaScript focus/blur(聚焦)实际应用
大家好,我进阶学习者。一、前言当用户点击某个元素或使用键盘上的Tab键选中时,该元素将会获得聚焦(focus)。当网页加载时,HTML特性(attribute)。autofocus也可以让一个焦点落在元素上,不仅如此,还有其它途径可以获得焦点。二、focus/blur事件当元素聚焦时,会触发focus事件,当元素失去焦点时,会触发blur事件。
菜园前端 菜园前端
2年前
JavaScript中常用事件
原文链接:鼠标事件鼠标单击事件click在文档中鼠标进行单击,就会触发事件。javascriptvari0document.addEventListener('click',function()console.log(i))鼠标双击事件dblclick
Easter79 Easter79
3年前
Swing自定义事件
1.Swing自定义事件将一个组件的事件传递给另一个组件.使用EventListenerList来管理事件,当A组件触发事件的时候,调用方法fireActionPerformed()来触发事件,然后再B组件中actionPerformed()方法来接收事件.当在容器KeyTextComponent中按下鼠标,我们就可以在Jframe中捕获触发的事
Wesley13 Wesley13
3年前
JS的事件冒泡和事件捕获
什么是事件?事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某
Stella981 Stella981
3年前
JavaScript事件详解
1.事件传播机制:事件冒泡,事件捕获。2.注册事件处理程序方式:设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下1<d
Stella981 Stella981
3年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event
Stella981 Stella981
3年前
JavaScript 基础(四)
HTMLDOMEvent(事件)HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作(action),比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,这些属性可插入HTML标签来定义事件动作。onclick//当用户点
Stella981 Stella981
3年前
JavaScript事件属性event.target和currentTarget 属性的区别。
event.target获取的是触发事件的标签元素event.currentTarget获取到的是发起事件的标签元素一、事件属性:event.targettarget事件委托的定义:本来该自己干的事,但是自己不干,交给别人来干例子1!(https://oscimg.oschina.n
Stella981 Stella981
3年前
JavaScript——页面相关事件
页面事件是在页面加载或改变浏览器的大小、位置,以及对页面中的滚动条进行操作时,所触发的事件处理程序。加载与卸载事件加载事件(onload)是在网页加载完毕后触发相应的事件处理程序,它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件(unload)是在卸载网页时触发相应的事件处理程序,卸载网页是指关闭当前页或
Stella981 Stella981
3年前
Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件JS与HTML的交互是通过事件实现的而事件指的就是:文档或浏览器窗口特定的交互瞬间可以通过侦听器来预定事件,以便在事件发生时执行相应的代码这种模式也是设计模式中的观察者模式事件流有了事件,也就有了事件流的概念事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序虽然事件流描述的都是事件的流