原文地址：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. 10- python 网络爬虫分析

    Python 网络爬虫简单分析 import urllib2 response = urllib2.urlopen("http://www.baidu.com") print re ...

  2. web开发路径问题

    1. web开发路径问题总结: http://www.cnblogs.com/tianguook/archive/2012/08/31/2665755.html 2. JSP/SERVLET 路径问题 ...

  3. 《Windows驱动开发技术详解》之Windows内存管理

    虚拟内存地址 Windows所有的程序(Ring0和Ring3层)可以操作的都是虚拟内存.有一部分单元会和物理内存对应起来,但并非一一对应,多个虚拟内存页可以映射同一个物理内存页.还有一部分单元会被映 ...

  4. VBS 文件选择框,选择Excel文件

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 on error resume Next Set objDialog=CreateObject("UserAcc ...

  5. RESTful架构3--开发实战

    转自:REST服务开发实战 如果要说什么是REST的话,那最好先从Web(万维网)说起. 什么是Web呢?读者可以查看维基百科的词条(http://zh.wikipedia.org/zh-cn/Web ...

  6. 第4章 流程控制----编写Java程序，应用for循环打印菱形

    package four; public class fouroneone { public static void main(String args[]){ ;i<=;i+=){ ;kong& ...

  7. SQL截取字符串

    SUBSTRING 返回字符.binary.text      或      image      表达式的一部分.有关可与该函数一起使用的有效      Microsoft®      SQL    ...

  8. IOS 中常用站位符

      CGPoint.CGRect等可以转化为字符串打印出来 如:   NSLog(@"-------------%@",NSStringFromCGPoint(point));   ...

  9. 相对路径json无法获取

    在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...

  10. 1.1 整理的Linux 基础

    本文总参照:http://blog.csdn.net/xiaoguaihai/article/details/8705992/ 2.用户管理操作命令 (1)Su - XX 切换用户 3.文件管理操作命 ...