《大学生前端成长记》 ---JavaScript基础 --冒泡(Bubble)和取消冒泡(cancelBubble)

Javascript的冒泡，原来是这样！

事件传递有两种方式：冒泡与捕获。

冒泡(Bubble)
举个例子，我碰了你的手，你的手属于你，所以我也就碰了你。
就是这么简单，如果还不明白，那就看下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title></title><style>body{height: 1000px;}div{width: 100px;height: 100px;background-color: red;}</style><script>window.onload=function(){var d =document.getElementById("div");var B =document.body;d.onclick=function(){console.log("我是div，我被点了");} B.onclick=function(){console.log("我是body，我也被点了");}}</script>
</head>
<body><div id="div">我是div</div>
</body>
</html>

我给body跟div都添加了单击事件！

我明明只点了div，为什么body也会在控制台输出呢?

这个就是冒泡！
所谓的冒泡就是事件的向上传递，后代元素被点击时，包裹后代的元素也会被点击！

- 取消冒泡（cancelBubble)
我就想点div的时候就只让div输出，让body不输出。那就得需要通过事件对象来取消冒泡！事件对象(event)

         d.onclick=function(event){console.log("我是div，我被点了");event  = event || window.event;event.cancelBubble = true;}

把div被点击的代码修改如上，cancelBubble=true 就是取消冒泡；
event =event || window.event 是为了兼容浏览器

效果如下：

嗯，冒泡这词让人有点懵，其实就这样！

《大学生前端成长记》 ---JavaScript基础 --冒泡(Bubble)和取消冒泡(cancelBubble)相关推荐

web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
前端网页三剑客------JavaScript基础
前端网页三剑客------JavaScript基础一.基础语法 1.引入方式行内JS:在标签内部编写JS代码,配合事件使用.<input type="button" val ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
[最完整的前端学习手册]——JavaScript基础一：
一.JS初识 1.JavaScript一种直译式脚本语言: 2.组成部分: (1)ECMAScript语法和基本对象 (2)文档对象模型(DOM)处理网页内容的方法和接口 (3)浏览器对象模型(BOM ...
【Java Web前端开发】JavaScript基础
文章目录 JavaScript: JavaScript: * 概念: 一门客户端脚本语言* 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎* 脚本语言:不需要编译,直接就可以被 ...
前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...

《大学生前端成长记》 ---JavaScript基础 --冒泡(Bubble)和取消冒泡(cancelBubble)

《大学生前端成长记》 ---JavaScript基础 --冒泡(Bubble)和取消冒泡(cancelBubble)相关推荐

最新文章

热门文章