原文地址：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. 安装、配置、启动FTP、SSH或NFS服务

    (1)准备使用软件维护工具apt-get. Ubuntu7.10中没有安装FTP.SSH.NFS服务器软件,它提供了一个很方便的安装.升级.维护软件的工具apt-get.apt-get从光盘.网络上下 ...

  2. iostextField文本框基本使用

    (1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...

  3. 第三十七节，hashlib加密模块

    在使用hashlib模块时需要先 import hashlib 引入模块 用于加密相关的操作,代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA ...

  4. python 文件夹操作

    常用的一些 import os for d, cd, fl in os.wald('.'): for f in fl: sufix = os.path.splitext(f)[1][1:] if su ...

  5. spark 编程向导

    http://spark.apache.org/docs/latest/programming-guide.html

  6. js算数方法

    原文:http://www.w3school.com.cn/js/js_obj_math.asp 除了可被 Math 对象访问的算数值以外,还有几个函数(方法)可以使用. 函数(方法)实例: 下面的例 ...

  7. hdu_5695_Gym Class(拓扑排序)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5695 题意:中文题,不解释 题解:逆向拓扑字典序就行 #include<cstdio> # ...

  8. linux top 命令---VIRT,RES,SHR,虚拟内存和物理内存(

    VIRT,RES,SHR,虚拟内存和物理内存(转) VIRT: 1.进程"需要的"虚拟内存大小,包括进程使用的库.代码.数据,以及malloc.new分配的堆空间和分配的栈空间等: ...

  9. How To Add Swap on Ubuntu 14.04

    https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-ubuntu-14-04 How To Add Swap on ...

  10. PHP生成静态页面详解

    PHP生成静态页面详解 看到很多朋友在各个地方发帖问PHP生成静态文章系统的方法,以前曾做过这样一个系统,遂谈些看法,以供各位参考.好了,我们先回顾一些基本的概念. 一,PHP脚本与动态页面. PHP ...