关于js冒泡、捕获、以及阻止冒泡
有如下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冒泡、捕获、以及阻止冒泡的更多相关文章
- JS事件捕获和事件冒泡
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- js 事件捕获与事件冒泡例子
http://codepen.io/huashiyiqike/pen/qZVdag addEventListener 默认是冒泡阶段执行,也就是父亲与子都监听时,点击子,子先处理,父亲再处理,这时加s ...
- jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 事件冒泡 ,停止事件冒泡 e.stopPropagation()
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>防止起泡 ...
- js之事件冒泡和事件捕获及其阻止详细介绍
虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在这里分 ...
- js 事件流和事件冒泡阻止
js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
随机推荐
- JavaScript Promise异步实现章节的下载显示
Links: JavaScript Promise:简介 1.一章一章顺序地下载显示下载显示 使用Array.reduce()和Promise.resolve()将各章的下载及显示作为整体串联起来. ...
- Java 如何读取resources
Sample in Github 1.一般使用Maven创建Java工程,代码文件在src/main/java文件夹中,资源文件在src/main/resources文件夹中,Java代码为什么可以读 ...
- LeetCode:学生的出勤记录|【551】
LeetCode:学生的出勤记录|[551] 题目描述 给定一个字符串来代表一个学生的出勤纪录,这个纪录仅包含以下三个字符: 'A' : Absent,缺勤 'L' : Late,迟到 'P' : P ...
- pyhton3 configparser模块
1 #!/usr/bin/env python 2 # coding=utf-8 3 __author__ = 'Luzhuo' 4 __date__ = '2017/5/26' 5 # config ...
- HibernateQL
查询语言---QL(Query Language) NativeSQL-------功能最强大 HQL--Hibernate QL EJB QL (JP QL)---HQL的一个子集 QBC--- ...
- imx6q Xorg下Qt应用开机自启动及添加桌面快捷启动图标的方法
启动scene3d例子: root@imx6qsabresd:/etc/X11/Xsession.d# ls -altotal 36drwxr-xr-x 2 root root 4096 Mar 12 ...
- OLTP和OLAP浅析
数据库设计的一个根基就是要弄清楚数据库的类型. 当今的数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing在线事务处理,联机事务处理).联 ...
- java内置注解、元注解和自定义注解
注解的作用: 1.生成文档 2.跟踪代码依赖性 3.编译时进行格式检查 ---------------------------------------------------------------- ...
- 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 ...
- centos 源码安装php5.5
系统环境: CentOS 6.5 / 7.0 x86_64 Fedora 20 x86_64下载 PHP 源码包 # wget http://cn2.php.net/distributions/php ...