事件捕捉：

单击<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. 以太坊Bootstrap和Kademlia算法实现逻辑简介（基于cpp-ethereum）

  2. 程序执行流程：猜数字游戏；库的使用：turtle

    >>> import turtle >>> turtle.circle(50) >>> turtle.circle(100) Python 3.6 ...

  3. ASP.NET Core2.2 多用户验证和授权

    asp.net core2.2 用户验证 和授权有很详细和特贴心的介绍,我感兴趣的主要是这两篇: cookie身份验证 基于角色的授权 我的项目有两类用户: 微信公众号用户,用户名为公众号的openi ...

  4. python的标识符

    1.在pyhon中,标识符由字母.数字.下划线组成 2.在python中,所有标识符可以有字幕,下划线开头,但不能以数字开头 3.python的标识符是区分大小写的 4.以下划线开头的标识符是有特殊意 ...

  5. Java语法基础学习DayTwenty（反射机制续）

    一.Java动态代理 1.代理设计模式的原理 使用一个代理将对象包装起来, 然后用该代理对象取代原始对象. 任何对原始对象的调用都要通过代理. 代理对象决定是否以及何时将方法调用转到原始对象上. 2. ...

  6. 配置Nim的默认编译参数 release build并运行

    配置Nim的默认编译参数 release build并运行 默认情况下nim编译是debug build,如果需要release build, 需要加上-d:release , release编译的命 ...

  7. DAY:3 列表

    列表元素提取 mes = ["北京","哈尔滨","长春","沈阳","天津"] print(mes ...

  8. callback函数

    const getUserInfo = function (callback) { try { let params = { "url": "https://h5.m.t ...

  9. iptables-save命令

    [root@localhost ~]# iptables-save -t filter > iptables.bak [root@localhost ~]# cat iptables.bak # ...

  10. opendaylight-O版本与openstack集成

    feature:list list (Lists all existing features available from the defined repositories) feature:list ...