事件捕捉：

单击<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. java 构造方法详解

    构造方法(构造器)    是一种特殊的方法,该方法只有功能:构造对象    特点:        1.没有返回值        2.构造方法的名称一定和类名一致        3.不能在构造方法中写r ...

  2. Spring工作原理及应用

    spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运行时 ...

  3. mysql安装（centos 7)

    1.安装依赖 yum install -y cmake make gcc gcc-c++ libaio ncurses ncurses-devel cd /usr/local/src 链接:https ...

  4. python常见函数以及模块调用

    1.常用函数区别 print: 在python3.0中print是函数,这意味着需要编写print(A )而不是print A str()和repr()的区别 >>>print st ...

  5. CenOS 更换yum源

    说明: 更换CentOS yum源既是修改配置文件/etc/yum.repos.d/CentOS-Base.repo. 目前有很多公司都提供yum源文件的下载,所以我们可以不需要去修改这个文件,直接从 ...

  6. 从网络上获取图片，并写入excel文件

    package com.weChat.utils; import com.manage.utils.DateUtil;import com.manage.utils.MD5Util;import or ...

  7. C# 比较和排序（IComparable和IComparer以及它们的泛型实现）

    准备工作: 1.创建实体类:ClassInfo,默认想要对其按照班级学生数量进行排序 public class ClassInfo  { /// <summary> /// 班级名称 // ...

  8. 360技术笔试编程题 - 无意间看到这么个东西，闲来无事用JS写了一下

    题目描述 为考验各自的数学能力,小B和小A经常在一起玩各种数值游戏,这一次他们又有了一种新玩法.每人从指定的数值范围中各自选择一个整数,记小A选择的数值为a,小B选择的数值为b.他们用一个均匀分布的随 ...

  9. Spring 基于set方法的依赖注入

    注意,再次强调,注入一个值用value,注入一个引用,要使用    ref   来注入 同时,注入的对象,要有set和get方法,才能通过方法注入. <?xml version="1. ...

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

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