javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获，看到这篇文章加深了理解)
原文地址：http://javascript.info/tutorial/bubbling-and-capturing
先给出最终的结论：
Summary
- Events first are captured down to deepest target, then bubble up. In IE<9 they only bubble.
- All handlers work on bubbling stage excepts
addEventListenerwith last argumenttrue, which is the only way to catch the event on capturing stage. - Bubbling/capturing can be stopped by
event.cancelBubble=true(IE) orevent.stopPropagation()for other browsers.
bubbling:
DOM elements can be nested inside each other. And somehow, the handler of the parent works even if you click on it’s child.
The reason is event bubbling.
For example, the following DIV handler runs even if you click a nested tag like EM or CODE:
<div onclick="alert('Div handler worked!')"> |
<em>Click here triggers on nested <code>EM</code>, not on <code>DIV</code></em> |
</div> |
That’s because an event bubbles from the nested tag up and triggers the parent.
The main principle of bubbling states:
After an event triggers on the deepest possible element, it then triggers on parents in nesting order.
For example, there are 3 nested divs:
<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css"> <div class="d1">1 <!-- the topmost -->
<div class="d2">2
<div class="d3">3 <!-- the innermost -->
</div>
</div>
</div> </body>
</html>
The bubbling guarantees that click on Div 3 will trigger onclick first on the innermost element 3 (also caled the target), then on the element 2, and the last will be element 1.
The order is called a bubbling order, because an event bubbles from the innermost element up through parents, like a bubble of air in the water.
this and event.target
The deepest element which triggered the event is called the target or, the originating element.
Internet Explorer has the srcElement property for it, all W3C-compliant browsers use event.target. The cross-browser code is usually like this:
var target = event.target || event.srcElement |
When handlers trigger on parents:
event.target/srcElement- remains the same originating element.this- is the current element, the one event has bubbled to, the one which runs the handler.
javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获，看到这篇文章加深了理解)的更多相关文章
- What is event bubbling and capturing?
What is event bubbling and capturing? 答案1 Event bubbling and capturing are two ways of event propaga ...
- 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...
- javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- 浅谈js的事件冒泡和事件捕获
本文地址:https://www.cnblogs.com/christineqing/p/7607113.html 前言: 这篇文章起源于上次工作上的原因,在事件上出的bug,所以就抽空写出一篇 ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- JavaScript中的事件冒泡？事件传播的解释
注:本文来源 可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
随机推荐
- 照着例子学习protobuf-python
以下是照着python操作protobuf进行的protobuf-python的学习笔记: 首先是protobuf的下载与安装: 1 由于google被墙,所以去github上面搜索了一下protob ...
- c语言-三字符组
C 源程序源字符集在 7 位 ASCII 字符集中包含,但设置为 ISO 646-1983 固定的代码的超集. 三字符序列允许 C 程序编写使用 " 仅 ISO (国际标准组织的固定的代码. ...
- Fine Uploader 简单配置方法
由于jquery.uploadify是基于flash的jquery上传控件,客户老是说出问题,所以今天换成了一个纯js的异步上传控件. 这方面的资料很少,故此记下来分享一下. 项目地址:Fine Up ...
- hdu_4547_CD操作(在线LCA)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4547 题意:中文,不解释 题解:很裸的LCA,注意父目录打开子目录一次就够了,这里我才用倍增在线LCA ...
- Jquery.Linq用法
下载:http://linqjs.codeplex.com/ LINQ Pad Enumerable.Range(0, 20).Where("$ % 3 == 0").Select ...
- Replication--进程无法在“xxxx”上执行“sp_replcmds”
错误消息:进程无法在“xxxx”上执行“sp_replcmds”. (源: MSSQL_REPL,错误号: MSSQL_REPL20011)获取帮助: http://help/MSSQL_REPL20 ...
- JSP内置对象--pageContent,request,response,session,application,config,out,page,exception
- js连续赋值、指针
jq的源码中有很多连续赋值,类似这样的: var a = {n:1}; var b = a; // 持有a,以回查 a.x = a = {n:2}; alert(a.x);// --> unde ...
- include和 merge
include和merge标记的作用主要是为了解决layout的重用问题. 比如我们有三四个Activity但是他们都要用到同一个样式的标题栏,虽然我们把一样的代码copy个三四遍也没关系,但实在是太 ...
- git repository 的使用
1. You should only be pushing to a bare repository. A bare repository is a repository that has no ch ...