有如下html

<ul>
  <li>
    <p>
      <a href="javascript:;">click me</a>
    </p>
  </li>
</ul>

给每个节点都添加监听事件:

document.querySelector("ul").addEventListener("click",function (event) {
  alert("this is ul");
},false);

document.querySelector("li").addEventListener("click",function (event) {
  alert("this is li");
},false);

document.querySelector("p").addEventListener("click",function (event) {
  alert("this is p");
},false);

document.querySelector("a").addEventListener("click",function (event) {
  alert("this is a");
},false);

点击a标签,alert的顺序是 a、p、li、ul。

这是默认的冒泡方式。

如果将监听事件里的false改为true,

再点击a标签,alert的顺序为ul、li、p、a。

这就是事件捕获。

如果我们将li、a改为true,ul、p仍为false,

那么顺序是,li、a、p、ul。

我是这么理解的,执行顺序,首先找true,也就是事件捕获,他的优先级大于冒泡,然后所有true的元素按从外到内的顺序执行,然后才是余下false的元素,从内到外执行。

还有就是阻止冒泡,还是第三的例子,顺序应该是li、a、p、ul。

但是我在p的监听事件里添加一句event.stopPropagation();

也就是

document.querySelector("p").addEventListener("click", function(event) {
  event.stopPropagation();  
  alert("this is p");
}, false);

那么顺序就变成了li、a、p。

ul就不执行了,因为在执行到p节点的时候阻止了冒泡,p之后的事件就不执行了。

关于js冒泡、捕获、以及阻止冒泡的更多相关文章

  1. JS事件捕获和事件冒泡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...

  2. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  3. js 事件捕获与事件冒泡例子

    http://codepen.io/huashiyiqike/pen/qZVdag addEventListener 默认是冒泡阶段执行,也就是父亲与子都监听时,点击子,子先处理,父亲再处理,这时加s ...

  4. jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 事件冒泡 ,停止事件冒泡 e.stopPropagation()

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>防止起泡 ...

  6. js之事件冒泡和事件捕获及其阻止详细介绍

    虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在这里分 ...

  7. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  8. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

  9. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

随机推荐

  1. JavaScript Promise异步实现章节的下载显示

    Links: JavaScript Promise:简介 1.一章一章顺序地下载显示下载显示 使用Array.reduce()和Promise.resolve()将各章的下载及显示作为整体串联起来. ...

  2. Java 如何读取resources

    Sample in Github 1.一般使用Maven创建Java工程,代码文件在src/main/java文件夹中,资源文件在src/main/resources文件夹中,Java代码为什么可以读 ...

  3. LeetCode:学生的出勤记录|【551】

    LeetCode:学生的出勤记录|[551] 题目描述 给定一个字符串来代表一个学生的出勤纪录,这个纪录仅包含以下三个字符: 'A' : Absent,缺勤 'L' : Late,迟到 'P' : P ...

  4. pyhton3 configparser模块

    1 #!/usr/bin/env python 2 # coding=utf-8 3 __author__ = 'Luzhuo' 4 __date__ = '2017/5/26' 5 # config ...

  5. HibernateQL

    查询语言---QL(Query Language)   NativeSQL-------功能最强大 HQL--Hibernate QL EJB QL (JP QL)---HQL的一个子集 QBC--- ...

  6. imx6q Xorg下Qt应用开机自启动及添加桌面快捷启动图标的方法

    启动scene3d例子: root@imx6qsabresd:/etc/X11/Xsession.d# ls -altotal 36drwxr-xr-x 2 root root 4096 Mar 12 ...

  7. OLTP和OLAP浅析

    数据库设计的一个根基就是要弄清楚数据库的类型.   当今的数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing在线事务处理,联机事务处理).联 ...

  8. java内置注解、元注解和自定义注解

    注解的作用: 1.生成文档 2.跟踪代码依赖性 3.编译时进行格式检查 ---------------------------------------------------------------- ...

  9. poj 2828 Buy Tickets 【买票插队找位置 输出最后的位置序列+线段树】

    题目地址:http://poj.org/problem?id=2828 Sample Input 4 0 77 1 51 1 33 2 69 4 0 20523 1 19243 1 3890 0 31 ...

  10. centos 源码安装php5.5

    系统环境: CentOS 6.5 / 7.0 x86_64 Fedora 20 x86_64下载 PHP 源码包 # wget http://cn2.php.net/distributions/php ...