7.事件冒泡机制

7.1.什么是事件冒泡

当一个元素接收到一个事件以后，会将事件传播给它的父级元素，它的负级元素会一层一层往上传播，直到最顶层window，这种事件传播机制叫作事件冒泡。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			window.onload = function(){

				//获取元素

				var oDiv1 = document.getElementById('div1');

				var oDiv2 = document.getElementById('div2');

				var oDiv3 = document.getElementById('div3');

				//给元素加事件处理函数

				oDiv1.onclick = fn1;

				oDiv2.onclick = fn1;

				oDiv3.onclick = fn1;

				//弹出对应id属性值

				function fn1(){

					alert(this.id);

				}

			}

		</script>

		<style type="text/css">

			#div1{

				width: 600px;

				height: 400px;

				background: black;

				border: 1px solid black;

			}

			#div2{

				width: 400px;

				height: 300px;

				margin: 50px auto;

				background: blue;

				border: 1px solid blue;

			}

			#div3{

				width: 200px;

				height: 200px;

				margin: 50px auto;

				background: red;

			}

		</style>

	</head>

	<body>

	    <div id="div1">

	    		div1

	    		<div id="div2">

	    			div2

	    			<div id="div3">

	    				div3

	    			</div>

	    		</div>

	    </div>

	</body>

</html>

代码解析：当点击div3的时候，先触发div3的点击事件，弹出div3的id值为div3，然后把点击事件传给父级元素div2，触发div2的点击事件，div2绑定了事件处理函数fn1，因此，会弹出div2的id属性值div2，接着div2再把点击事件传播给div1，div1同样也绑定了事件处理函数，弹出id值div1，div1再往上传播点击事件，由于div1的父级没有绑定事件处理函数，所以没有弹出值，但是div1的父级还是接收到了点击事件的，只是没有作出响应，这个就是冒泡机制的全过程。冒泡机制在JavaScript中是默认存在的

7.2.冒泡机制带来的影响

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

		window.onload = function(){

			var oBtn = document.getElementById("btn");

			var oDiv = document.getElementById('box');

			oBtn.onclick = function(){

				oDiv.style.display = "block";

			}

			document.onclick = function(){

				oDiv.style.display = "none";

			}

		}

		</script>

		<style type="text/css">

			#box{

				width: 300px;

				height: 300px;

				background: blue;

				display: none;

			}

		</style>

	</head>

	<body>

		<input type="button" id="btn" value="显示" />

		<div id="box"></div>

	</body>

</html>

//注意：上面代码点击按钮不显示的原因就是当按钮的点击事件触发以后把div显示出来了，但是随后又把点击

事件传到外层，document接收到点击事件以后，调用事件处理函数又把div隐藏了。因此，看不到div显示的效

果，也就是div的点击事件和父级的点击事件冲突了，这也是事件冒泡带来的问题。

7.3.阻止冒泡

上面的代码如果要正常运行，就要取消掉div元素的点击事件的冒泡。取消事件冒泡 需要将event对象上的cancelBubble属性设置成true，如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

		window.onload = function(){

			var oBtn = document.getElementById("btn");

			var oDiv = document.getElementById('box');

			oBtn.onclick = function(ev){

				var ev = ev || event;

				//取消事件冒泡

				ev.cancelBubble = true;

				oDiv.style.display = "block";

			}

			document.onclick = function(){

				oDiv.style.display = "none";

			}

		}

		</script>

		<style type="text/css">

			#box{

				width: 300px;

				height: 300px;

				background: blue;

				display: none;

			}

		</style>

	</head>

	<body>

		<input type="button" id="btn" value="显示" />

		<div id="box"></div>

	</body>

</html>

7.4.冒泡机制带来的好处？

虽然事件冒泡带来了一些不好的影响，但是可以通过取消事件冒泡来解决，之所以默认事件冒泡机制开启，是因为事件冒泡会节省很多代码。例如：有一个需求，点击一个按钮，显示div，点击除按钮外的其他元素，需要隐藏div，这个时候有两种解决方案。第一种，找到页面中除了按钮外的其他元素，都给这些元素加点击事件，然后隐藏div。这一种如果页面中有几百个元素，那么实现起来就相当复杂，因此，不能采用。第二种解决方案，给这些元素的共同父级加点击事件，当这些元素触发点击事件以后，把事件传播给父级元素的点击事件，这样就节省很多代码,也就是上面案例中的应用实现。

螺钉课堂视频课程地址：http://edu.nodeing.com

js事件入门（6）的更多相关文章

  1. js事件入门（2）

    2.鼠标事件 鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. 2.1.onmousedown 鼠标按下的时候触发的事件 <!DOCTYPE html> <h ...

  2. js事件入门（5）

    5.窗口事件 5.1.onload事件 元素加载完成时触发,常用的就是window.onload window.onload = function(){ //等页面加载完成时执行这里的代码 } 5.1 ...

  3. js事件入门（4）

    4.表单事件 表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作. 4.1.onsubmit事件 当用户点击submit按钮来提交表单时,就会触发onsubmit事件,如果事件处理程序返 ...

  4. js事件入门（3）

    3.键盘事件 3.1.onkeydown 键盘按下事件 当键盘按下的时候触发 <!DOCTYPE html> <html> <head> <meta char ...

  5. js事件入门（1）

    1.事件相关概念 1.1 什么是事件? 事件是用户在访问页面时执行的操作,也就是用户访问页面时的行为.当浏览器探测到一个事件时,比如鼠标点击或者按键.它可以触发与这个事件相关的JavaScript对象 ...

  6. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  7. 第一百一十九节，JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

  8. Node.js开发入门—HelloWorld再分析

    在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...

  9. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

随机推荐

  1. Nginx 笔记（一）nginx简介与安装

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) Nginx 简介: 1.介绍 nginx 的应用场景和具体可以做什么事情 2.介绍什么是反向代理 3.介 ...

  2. JavaSE(一) 语言概述

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 目录 1 基础常识 2 Java语言版本迭代概述 3 Java语言应用的领域 4 Java语言的特点 5 ...

  3. Java实现 LeetCode 823 带因子的二叉树（DP）

    823. 带因子的二叉树 给出一个含有不重复整数元素的数组,每个整数均大于 1. 我们用这些整数来构建二叉树,每个整数可以使用任意次数. 其中:每个非叶结点的值应等于它的两个子结点的值的乘积. 满足条 ...

  4. Java实现 LeetCode 126 单词接龙 II

    126. 单词接龙 II 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出所有从 beginWord 到 endWord 的最短转换序列.转换需遵循如下规则: ...

  5. 第九届蓝桥杯JavaB组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.第几天 题目描述 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数 ...

  6. java实现第七届蓝桥杯打印数字

    打印数字 打印数字 小明写了一个有趣的程序,给定一串数字. 它可以输出这串数字拼出放大的自己的样子. 比如"2016"会输出为: 00000 1 6666 2 0 0 1 1 6 ...

  7. 关于晶体问题TCXO_14.7456MHZ

    如何判断热点的晶体好不好,首先,看偏移,偏移为0的晶体一般就是温补晶体,当然偏移是500或者几百固定的也是温补,但是不是我们首选的温补晶体 因为偏移为0非常省事,这是系统默认的偏移0,因此设置好频率就 ...

  8. linux下使用tcpdump抓包分析tcp的三次握手

    首先贴上tcp 三次握手的原理图服务器开启ftp服务并执行tcpdump抓包服务器:192.168.3.14 ftp服务客户端:192.168.3.100 服务器执行以下命令,客户端访问服务器ftp: ...

  9. 嵌入式Linux内核开发工程师必须掌握的三十道题

    如果你能正确回答以下问题并理解相关知识点原理,那么你就可以算得上是基本合格的Linux内核开发工程师. 1. Linux中主要有哪几种内核锁?(进程同步与互斥) (1)自旋锁:非睡眠锁 (2)信号量: ...

  10. Netty 源码解析: Netty 的 ChannelPipeline

    ChannelPipeline和Inbound.Outbound         我想很多读者应该或多或少都有 Netty 中 pipeline 的概念.前面我们说了,使用 Netty 的时候,我们通 ...