JS中的事件冒泡——总结
一. 有话要说
事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结;一方面是给自己增加印象,另一方面给园子的新手们,提供一些方便 ^_^
二. 事件冒泡
什么是事件冒泡? 定义百度一搜一大把,我就不细讲了;我总结就是:dom行为机制的触发,并且存在上下级元素(父子级),如果不做些特殊操作,就会产生重复触发这个行为机制(事件)
具体表现:
<div style="width:100%;height:700px;">
<div style="width: 200px; height: 50px; border: 1px solid #000;">
</div>
</div>
jq:
$(document).ready(function () {
$("body").bind("click", function () {
alert("body元素被点击了");
});
$("div").bind("click", function () {
alert("div元素被点击了");
});
});
这样运行就会发现,当点击div范围的时候 会先触发div的点击事件,然后再是body的点击事件;为什么?
这是因为当我们为body和div分别绑定点击事件的时候,由于body是div的父元素,当div被点击时,dom会回溯找到它的(div)的父元素,并查看有没有为父元素绑定事件,有则触发,没有就继续查找div的父元素 这样不断的向上回溯查找 这就形成了事件冒泡。
这显然不是我们想到的结果,那怎么样才能做到当点击div的时候就只触发div的点击事件,而不要触发body的点击事件?
解决方案百度,园子里太多了,所以我这里就大概总结了那么几种方法
三. 解决方法
方法1. 直接在子元素(这里的div)js的最后增加一个 return false;
方法2. 当你把方法1的子元素的绑定方法抽出来放在元素上的onclick属性上的时候,方法1就不管用了,那么就要做以下处理:
function Test2(event) {
alert("div元素被点击了");
event = window.event || event;
if (event.stopPropagation) //停止向上传播事件 关于stopPropagation的解释,请点击这stopPropagation
event.stopPropagation();
else
event.cancelBubble = true; //如果浏览器不支持stopPropagation 则设置cancelBubble来取消上传传播事件冒泡
};
方法3. 除了以上方法,还有一个方法值得注意,这个方法一开始我也不知道,是查了资料才知道的
$("body").bind("click", function (e) {
e = e || window.event;
var src = e.target || e.srcElement;
if (src.tagName == "DIV") { //这里可以用属性,只要是符合dom标签属性规则的 比如 id等
//说明是点击了div
alert("div元素被点击了");
}
else {
//是在div范围外点击的
alert("body元素被点击了");
}
});
希望这些对遇到事件冒泡的同学有些帮助 就写到这里了!
转载于:https://www.cnblogs.com/ms27946/p/5088714.html
JS中的事件冒泡——总结相关推荐
- JS 中的事件冒泡与捕获
本文来源:渔人 原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
- jQuery 中的事件冒泡和阻止默认行为
jQuery 中的事件冒泡和阻止默认行为 参考资料: <锋利的jQuery> 作者:单东林 张晓菲 魏然 出版社: 人民邮电出版社 1.事件冒泡 [javascript] vi ...
- JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理 什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
- JS中的事件基础知识
本文首发于个人博客:www.wyb.plus JS作为一门事件驱动型的语言,了解与事件有关的知识是十分必要的. JS中与事件有关的概念非常多,本文尽量整理完善. 作者:王雨波 qq:760478684 ...
- js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法 参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
- 如何正确使用Node.js中的事件
by Usama Ashraf 通过Usama Ashraf 如何正确使用Node.js中的事件 (How to use events in Node.js the right way) Before ...
- Javascript中的事件冒泡
这是一个基础性的文章,使用Javascript观察DOM中的事件冒泡机制,并介绍如何阻止默认行为和如何组织事件冒泡的方法. 1. 第一个例子可以在Firefox下运行 <div id=" ...
最新文章
- Apache,Nginx,Lighttpd分别使用X-sendfile功能提升文件下载性能
- 数据蒋堂 | 人工智能中的“人工”
- python介绍和用途-python中模块的介绍与使用
- 【安全漏洞】一次前台任意文件下载漏洞挖掘
- 数码管c语言程序如何控制,跪求,8255控制数码管,单片机c语言程序;
- 清华计算机考研笔记,[考研天地]清华计算机,电子,自动化全套考研资料
- 矩阵每一行重复_【剑指offer】65 矩阵中的路径
- 作者:吴甘沙,男,现任英特尔中国研究院院长。
- volatile的深入理解--【sky原创】
- 先验概率、后验概率与似然估计
- python整理表格数据_python --整理数据结构(列表)
- Hadoop2.4.1(QJM HA)+HBASE0.98 双MASTER问题分析
- 在latex中使用GB/T 7714—2015参考文献著录规则
- 【遥感专题系列】微波遥感(二、合成孔径雷达SAR基础)
- 上海哪里打印比较便宜?
- 浏览器 本地html 图片不显示,浏览网页图片无法显示怎么回事 网页图片显示不出来的解决方法...
- 2020 年 Python 知识清单(数据分析)
- mint-ui —— navbar的使用
- HTTP/1.1、HTTP/2
- 项目风险常见清单列表库