什么是js事件冒泡？

什么是js事件冒泡？

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或事件返回true,那么这个事件会向这个对象的的父级传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者到达了对象层次的最顶层，即document对象。

事件冒泡示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件冒泡</title><style>#boxOne{width: 300px;height: 300px;border:1px solid red;}#boxTwo{width: 200px;height: 200px;border: 1px solid green;}#boxthree{width: 100px;height: 100px;background-color: aquamarine;}</style>
</head>
<body><div id="boxOne" onclick="alert('我是最外层')"> <div id="boxTwo" onclick="alert('我是中间层！')"> <a id="boxthree" href="http://www.baidu.com"mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a> </body>
</html>

比如上面这个页面，
分为三层：boxOne是第外层，boxTwo中间层，boxthree是最里层;
他们都有各自的click事件，最里层a标签还有href属性。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡，本来我只点击ID为boxthree的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：boxthree---->boxTwo---->boxOne。从最里层冒泡到最外层。

如何来阻止事件冒泡?

1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
还有一种有冒泡有关的：
3.event.preventDefault();
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

什么是js事件冒泡？相关推荐

JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...
js事件冒泡与捕捉解析
js的事件的冒泡与捕捉,简单来说就像个V型,从最高层body开始捕捉事件,然后一层一层往下开始捕捉,底层捕捉到事件后进行处理,然后再一层层冒泡传给父级,父级再传到它的父级,如果没有阻止冒泡,事件会一直 ...
click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
js事件冒泡和传播详细解释
举栗子事件输出hello world 事件有两种,一种为事件传播,一种是事件冒泡事件传播和事件冒泡这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的 ...

什么是js事件冒泡？

什么是js事件冒泡？相关推荐

最新文章

热门文章