js事件入门（6）
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）的更多相关文章
- js事件入门（2）
2.鼠标事件 鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. 2.1.onmousedown 鼠标按下的时候触发的事件 <!DOCTYPE html> <h ...
- js事件入门（5）
5.窗口事件 5.1.onload事件 元素加载完成时触发,常用的就是window.onload window.onload = function(){ //等页面加载完成时执行这里的代码 } 5.1 ...
- js事件入门（4）
4.表单事件 表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作. 4.1.onsubmit事件 当用户点击submit按钮来提交表单时,就会触发onsubmit事件,如果事件处理程序返 ...
- js事件入门（3）
3.键盘事件 3.1.onkeydown 键盘按下事件 当键盘按下的时候触发 <!DOCTYPE html> <html> <head> <meta char ...
- js事件入门（1）
1.事件相关概念 1.1 什么是事件? 事件是用户在访问页面时执行的操作,也就是用户访问页面时的行为.当浏览器探测到一个事件时,比如鼠标点击或者按键.它可以触发与这个事件相关的JavaScript对象 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- 第一百一十九节，JavaScript事件入门
JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- 万字超强图文讲解AQS以及ReentrantLock应用（建议收藏）
| 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...
- JVM虚拟机 与 GC 垃圾回收
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.JVM体系结构概述 1.JVM 与系统.硬件 JVM是运行在操作系统之上的,它与硬件没有直接的交 ...
- Java实现 LeetCode 552 学生出勤记录 II（数学转换？还是动态规划？）
552. 学生出勤记录 II 给定一个正整数 n,返回长度为 n 的所有可被视为可奖励的出勤记录的数量. 答案可能非常大,你只需返回结果mod 109 + 7的值. 学生出勤记录是只包含以下三个字符的 ...
- Java实现 蓝桥杯VIP 算法训练 猴子分苹果
问题描述 秋天到了,n只猴子采摘了一大堆苹果放到山洞里,约定第二天平分.这些猴子很崇拜猴王孙悟空,所以都想给他留一些苹果.第一只猴子悄悄来到山洞,把苹果平均分成n份,把剩下的m个苹果吃了,然后藏起来一 ...
- Java实现 LeetCode 211 添加与搜索单词 - 数据结构设计
211. 添加与搜索单词 - 数据结构设计 设计一个支持以下两种操作的数据结构: void addWord(word) bool search(word) search(word) 可以搜索文字或正则 ...
- Java实现 LeetCode 90 子集 II（二）
90. 子集 II 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [ ...
- java实现三进制转十进制
** 三进制转十进制** 不同进制的数值间的转换是软件开发中很可能 会遇到的常规问题.下面的代码演示了如何把键盘输入的3 进制数字转换为十进制.试完善之. BufferedReader br = ne ...
- JavaScript使用for循环和splice删除数组指定元素的注意点
在JavaScript里可以结合for循环和splice来删除数组指定的元素.但是要注意删除元素后,数组索引会发生改变 示例 var arr = ["a","b" ...
- 关于VMware虚拟机启动EFI/UEFI支持
作为较新计算机和操作系统用于引导计算机的技术,可扩展固件接口 (EFI) 正在取代 BIOS.EFI 有时称为统一可扩展固件接口 (UEFI). 使用VMware创建虚拟机,默认还是会使用传统的BIO ...
- 【JAVA习题十九】利用递归方法求5!。
package erase; public class 用递归法求5的阶乘 { public static void main(String[] args) { // TODO Auto-genera ...