事件捕捉：

单击<div>元素就会以下列顺序触发click 事件。

Document => Element html => Element body => Element div

事件冒泡：

单击<div>元素就会以下列顺序触发click 事件。

Element div => Element body => Element html => Document

示例：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title></title>

	<style type="text/css">

		#i1{

			height: 500px;

			width: 400px;

			background-color: pink;

		}

		#i2{

			height: 400px;

			width: 300px;

			background-color: red;

		}

		#i3{

			height: 300px;

			width: 200px;

			background-color: green;

		}

	</style>

</head>

<body>

<div id="i1">

	<div id="i2">

		<div id="i3"></div>

	</div>

</div>

<script type="text/javascript">

	var myi1 = document.getElementById("i1");

	var myi2 = document.getElementById("i2");

	var myi3 = document.getElementById("i3");

	myi1.addEventListener('click', function(){console.log('i1')}, false);

	myi2.addEventListener('click', function(){console.log('i2')}, false);

	myi3.addEventListener('click', function(){console.log('i3')}, false);

	// 默认参数为 false, false 为冒泡, true 为捕捉

</script>

</body>

</html>

执行结果：

i3

i2

i1

执行顺序

以上面代码为例，更改addEventListener参数，得到不同的结果：

说明addEventListener从上级元素向下寻找，遇到true就先执行，遇到false就继续向下一级寻找，直到没有下一级

事件冒泡(event bubbling)与事件捕捉(event capturing)的更多相关文章

  1. JS 事件冒泡整理 浏览器的事件流

    JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...

  2. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  3. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  4. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  5. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  6. JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  7. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...

  8. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  9. JS事件——禁止事件冒泡和禁止默认事件

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...

随机推荐

  1. kaliLinux 安装 telnet

    一.安装xinetd telnetd root@helm:~# apt-get install xinetd telnetd 二.查看服务是否启动状态 说明自启动了 如果没有需要启动xinetd,启动 ...

  2. 机器学习之朴素贝叶斯&贝叶斯网络

    贝叶斯决决策论       在所有相关概率都理想的情况下,贝叶斯决策论考虑基于这些概率和误判损失来选择最优标记,基本思想如下: (1)已知先验概率和类条件概率密度(似然) (2)利用贝叶斯转化为后验概 ...

  3. 本地pip 源搭建起来

    pip install pip2pi pip2tgz target_dir -r requirement.txt 下载想要的本地的py包  /usr/local/python3/bin/dir2pi ...

  4. ios ionic3 跳转第三方地图 xcode加入白名单

    之前我有篇随笔讲的是ionic3应用内跳转第三方地图应用的方法 忘了记录在ios内是需要把你用到的第三方地图应用加入跳转URL白名单内的 第三个是高德地图 iosamap 第四个是百度地图 baidu ...

  5. 在IDEA中以TDD的方式对String类和Arrays类进行学习

    要求 测试相关方法的正常,错误和边界情况 String类 charAt split Arrays类 sort binarySearch 提交运行结果截图和码云代码链接,截图没有水印的需要单独找老师验收 ...

  6. .Net Core+Angular6 学习 第二部分(创建Angular6项目)

    . 创建angular6 前提: 需要安装nodejs以及angular的脚手架,Angular官网要求Angular6.0必须在node 8.x 和 npm 5.x 以上的版本才能正常使用. 我的版 ...

  7. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

  8. java DOM

    使用DOM解析XML文档的步骤 1.创建解析器工厂对象 DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); 2 ...

  9. Python 递归锁

    import time from threading import Thread, Lock, RLock def f1(locA, locB): # print('xxxx') # time.sle ...

  10. Python SyntaxError: invalid token

    python命名不能以数字开头,import时会报错