如何阻止事件冒泡和默认行为?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/77769191

这里是修真院前端小课堂,本篇分析的主题是

【如何阻止事件冒泡和默认行为?】

1.背景介绍

浏览器的事件发生顺序

浏览器的事件发生顺序分为事件冒泡与事件捕获,分别由微软和网景公司提出。

事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

事件捕获会从最外层开始发生,直到最具体的元素。
因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

网景 和 微软 曾经的战争还是比较火热的,当时, 网景主张捕获方式,微软主张冒泡方式。后来 w3c 采用折中的方式,平息了战火,制定了统一的标准——先捕获再冒泡。

默认行为

浏览器的一些默认的行为。例如:点击超链接跳转,点击右键会弹出菜单,滑动滚轮控制滚动条

 

2.知识剖析

如何切换事件冒泡与事件捕获

使用addEventListener方法,其第三个参数可选择事件的发生顺序

element.addEventListener(event, function, useCapture)

第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数。

 

3.常见问题

如何阻止事件冒泡和默认事件?

 

4.解决方案

阻止事件冒泡

DOM中提供stopPropagation()方法,但IE不支持,使用event对象在事件函数中调用就行.

IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用.

jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行。

IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用。

jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()

对于a链接,可以使用javascript伪协议来阻止默认行为

 

5.编码实战

DEMO

 

6.扩展思考

冒泡和捕获同时存在时事件的触发顺序?

这里记被点击的DOM节点为target节点

1.对于非target节点则先执行捕获在执行冒泡
2.对于target节点则是先执行先注册的事件,无论冒泡还是捕获、

 

7.参考文献

<a href="https://segmentfault.com/a/1190000004484445">JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE</a>

<a href="https://segmentfault.com/a/1190000005654451">JS中事件冒泡与捕获</a>

 

8.更多讨论

事件冒泡有什么作用

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情

PPT
视频

 

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。

【更多内容,可以加入IT交流群565734203与大家一起讨论交流】

【这里是技能树·IT修真院:IT修真院官网,初学者转行到互联网的聚集地】

 

没有更多推荐了,返回首页