事件捕捉：

单击<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. PAT B1013

    PAT B1013 标签(空格分隔): PAT 解法:埃氏筛法 注意点: 1. 由于不知道第n个素数有多大,所以要用一个大的数组来储存结果. 2. 注意输出格式,末尾不能有多余空格 #include ...

  2. [git]入门-创建版本库

    转载整理自:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256 ...

  3. python模块和包（模块、包、发布模块）

    模块和包 目标 模块 包 发布模块 01. 模块 1.1 模块的概念 模块是 Python 程序架构的一个核心概念 每一个以扩展名 py 结尾的 Python 源代码文件都是一个 模块 模块名 同样也 ...

  4. css清除浮动方式总结

    1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 <!DOCTYPE html> <html lang="en"> <he ...

  5. SLAM for dummies中文翻译

    1.简介 本文的主要目的是简单介绍移动机器人领域中广泛应用的技术SLAM(同步定位与地图绘制)的理论基础以及应用细节.虽然目前存在很多关于SLAM技术的方方面面的论文,但是对于一个新手来说,仍然需要花 ...

  6. 2018-2019-2 《网络对抗技术》Exp1 PC平台逆向破解 20165326

    实验一 目录 直接修改程序机器指令,改变程序执行流程 通过构造输入参数,造成BOF攻击,改变程序执行流 注入Shellcode并执行 问题及解决 思想感悟 一.修改机器指令 首先你需要一个pwn1文件 ...

  7. 用 Cobertura 测量测试覆盖率

      尽管测试先行编程(test-first programming)和单元测试已不能算是新概念,但测试驱动的开发仍然是过去 10 年中最重要的编程创新.最好的一些编程人员在过去半个世纪中一直在使用这些 ...

  8. 编辑器测试-TinyMCE

    一级标签 二级便签 引用段落1231456456 普通段落 链接 简书 https://www.jianshu.com/p/edee77363855 import pygame WINWIDTH = ...

  9. iOS原生 和 react native视图混编

    在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编. 关键点只有二: 1.通过 RCTRootView 加载RN视图. 2.RN中,只需要AppRegistry. ...

  10. Delphi7 在Windows 7上无法打开Help选项下帮助文档

    发现无法打开Delphi7的帮助文档,百度了一下,问题已经解决. Delphi的帮助文档是*.hlp格式的,而Windows7已经不再带有WinHlp32程序,所以无法再打开此类格式. 此时你需要下载 ...