事件捕捉：

单击<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. DevExpress VCL Controls 2019发展路线图（No.2)

    [DevExpress VCL Controls下载] ExpressQuantumTreeList Excel-inspired Filter (v19.1) 与ExpressQuantumGrid ...

  2. 保存eclipse个人配置的几种方式

    本人用eclipse做Java开发之前,往往要设置下eclipse的背景,字体,颜色,以便保护眼睛.但这些数据是放在workspaces里的,一旦新建workspace所有要重新调整,很麻烦,于是尝试 ...

  3. hive批量删除表

    #!/bin/shhive -e "use csxuy;show tables;"|grep product_tour2 | while read linedoecho -n &q ...

  4. Ubuntu 16.04 上安装 MySQL 5.7 教程

    介绍 MySQL 是一种开源数据库管理系统,通常作为流行的LAMP(Linux,Apache,MySQL,PHP / Python / Perl)堆栈的一部分安装.它使用关系数据库和SQL(结构化查询 ...

  5. Hacklab综合关

    没有注入到底能不能绕过登录 分值: 350 不是SQL注入 通关地址   不是注入,就先扫一下后台,发现在robots.txt后面有 访问一下,发现要先登陆,用burpsuit爆了好久都没有成功,最后 ...

  6. .Net Core+Angular6 学习 第三部分(从api获取data)

    . 现在开始需要集成angular6到VS项目中 1.1 打开Startup.cs文件, 在ConfigureServices方法中配置angular files的目录. 1.2 在Configure ...

  7. 马凯军201771010116《面向对象与程序设计Java》第十一周学习总结

    一.理论知识部分 第九章  集合 1.数据结构介绍:线性结构:线性表,栈,队列,串,数组,文件.非线性结构:树,图. 散列表:又称为哈希表. 散列表算法的基本思想是:以结点的关键字为自变量,通过一定的 ...

  8. Centos解除端口占用

    - 查看所有端口占用 - netstat -tln - 查看端口被哪个进程占用 - lsof -i:端口号 - 杀死被占用端口 - kill 端口号

  9. 常见问题一之拼接表格 js传递参数变量 Json接收值

    1.前台拼接表格时,有时候需要使用拼接html字符串,需要多次循环拼接的,放在方法里边: //ary可以是数组中的一组数据.function(ary){var MyHtml="<tr& ...

  10. 从零开始写自己的PHP框架系列教程（二）[App.php]

    从这一个文件开始以后加载的均以类加载,请注意命名空间和所在文件的路径 APP.php的这个类所在路径:根目录\framework\App.php 直接上代码 namespace framework; ...