原文:
Event flow in DOM Level 2
Consider the situation when there are 2 elements nested together.
Both have event handlers registered on the same event type, say
"click". When the user clicks on the inner element, there are two
possible ways to handle it:
- Trigger the elements from outer to inner (event capturing). This model is implemented in Netscape Navigator
.
- Trigger the elements from inner to outer (event bubbling). This model is implemented in Internet Explorer and other browsers.
W3C takes a middle position in this struggle. Events are first
captured until it reaches the target element, and then bubbled up.
During the event flow, an event can be responded to at any element in
the path (an observer) in either phase by causing an action, and/or by
stopping the event (with method event.stopPropagation()
for Mozilla and command event.cancelBubble = true
for Internet Explorer), and/or by cancelling the default action for the event.
分享到:
相关推荐
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象等。 如何理解事件? JavaScript与HTML之间的交互就是通过事件实现的。 事件:用户或...
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流(event flow )存在三个阶段:事件捕获阶段...
示例描述:学习JavaScript的事件处理。 7.1.html 双击某行变换背景色。 7.2.html 获取鼠标的位置。 7.3.html div中显示选中文本。 7.4.html 检测onkeydown事件与onkeypress事件执行的先后顺序。 ...
全书通过大量代码示例说明图的方式说明代码的工作机制,以及各个部分的作用和功能,引导读者在实践中学习和领悟JavaScript的基本思想。通过学习本书,读者不仅能够掌握JavaScript编程的各项技术细节,还能体会到不断...
process基于单向数据流的 JavaScript 流程管理机制工作原理在 JavaScript 中,变量所对应的值,可以在函数之间传入与返回。var add = function(num) { return num + 1}var minus = function(num) { return num - 1}...
javascript 应用程序的各种有用机制的集合。 概括 绑定一种机制实现了数据绑定机制。 事件众所周知的事件机制的实现。 Functional用于改进异步的编程风格,如 node.js,在函数式风格中。 Grid二维网格流算法的...
- [面试官:JavaScript事件流:深入理解事件处理和传播机制](https://github.com/linwu-hi/code-interview/issues/41) - [面试官:执行上下文与闭包](https://github.com/linwu-hi/code-interview/issues/40) - ...
javascript oop学习 javascript是基于面向对象的脚本语言,其本身并没有提供纯OOP机制 通过javascript的语法特征可以模拟实现,在目前流行的框架中随处可见
此外,它有一个后处理器来对收集的数据进行后处理,以及一个调试器来使用 Chrome 中的调试机制创建调用图(适用于小型项目) javascript-parser:包含先决条件 JavaScript 语法,用于解析流和调用图算法的 ...
之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序。如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码...
通过扩散扩展Kafka主题建模通过使用 Cloud和Apache Kafka...第2课:使用主题视图对Kafka事件firehose进行细粒度分布引入了的概念,这是一种将服务器的(数据结构)的一部分映射到另一个的动态机制。 这样可以在将数据发
我们大家都知道在写java和c时,必须要在语句后加分号,否则编译通不过。而js不同,存在自动分好插入机制,下文简称ASI。它会给源代码的 token 流自动...下面这篇文章我们就来谈谈Javascript的自动分号插入(ASI)机制。
旨在提供一种机制,使其成为能够执行绑定到Java和Javascript对象的动作的流执行程序框架。 笔记: 本文档于2015年2月9日创建,并于2015年4月24日重新定义。 最后更新时间为2015年5月24日。 [ 目标 ] 主要获得一...
线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的。 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签...
之前用Vue.js制作的经验蛮不错的,这次决定试试看不用Vuex写看看,自己模拟看看store和mutations平常在做的事情,也把答题结果的资料丢到Firebase做储存, 实作Ranking 排行榜的机制。 题目方面则是采用了之前上过...
执行环境会负责管理代码执行过程中使用的内存,编写JavaScript程序时,所需内存的分配以及无用内存的回收完全实现自动管理。 原理: 找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定...
引导程序 流畅,直观,功能强大的前端框架,可更快,更轻松地进行Web开发。 ···· 目录 快速开始 提供几个快速入门选项: ... 与安装 : npm install bootstrap 安装: yarn add bootstrap@4.1.3 ...