原文地址：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 addEventListener with last argument true, 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的事件冒泡和事件补获，看到这篇文章加深了理解)的更多相关文章

  1. What is event bubbling and capturing?

    What is event bubbling and capturing? 答案1 Event bubbling and capturing are two ways of event propaga ...

  2. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

  3. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  4. 浅谈js的事件冒泡和事件捕获

    本文地址:https://www.cnblogs.com/christineqing/p/7607113.html 前言:    这篇文章起源于上次工作上的原因,在事件上出的bug,所以就抽空写出一篇 ...

  5. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  6. javascript --- 事件冒泡与事件捕获

    事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...

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

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  8. JavaScript中的事件冒泡？事件传播的解释

    注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...

  9. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

随机推荐

  1. HDU 5812 Distance

    从a变到b,也就是将a一直除素因子,除到1为止,然后乘b的素因子,一直乘到b. 但是gcd(a,b)部分是不用除下去的.所以d(a,b)=a/gcd(a,b)的素因子个数+b/gcd(a,b)的素因子 ...

  2. ios给textView提价提示性文字

    不推荐使用的方式 但是在用的时候才发现原来textView没有类似于textField的那种placeholder功能.所谓placeholder就比如用户看到一个输入框,然后输入框里面一般会有几个浅 ...

  3. 样式的操作-访问外部定义的css样式

    JS对css的控制力非常强,甚至可以控制外部定义的css样式 ———————————————————————— <style>            .myclass{           ...

  4. hdu_5707_Combine String("巴卡斯杯" 中国大学生程序设计竞赛 - 女生专场)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5707 题意:给你三个字符串 a,b,c,问你 c能否拆成a,b,a,b串的每一个字符在c中不能变 题解 ...

  5. debia下安装libjpeg

    今天在编译时遇到如下问题: configure: error: no usable libjpeg; please install libjpeg devel package or equivalen ...

  6. iOS：UIWebView scrollView 的分页滑动问题

    最近在弄一个native webview+html的项目,感觉这种尝试还是挺不错的,特被是适合内容类app.如杂志.电子书等.其实native搭的就是一个框架,主体还是在html的内容上,所以花在ht ...

  7. 在调试安卓系统的时候需要这个 ”adb disable-verity“

    在调试设备的时候.想要对文件进行读写 于是使用adb remount 出现提示. 请使用 ”adb  disable-verity“ 于是使用adb  disable-verity 的命令. 得到如下 ...

  8. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  9. over-float清除浮动++隐藏溢出

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  10. Servlet简介及使用

    javaweb学习总结(五)——Servlet开发(一) 一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口 ...