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

小课堂【武汉第217期】

分享人: 肖浩宇

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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.解决方案

阻止事件冒泡

1. DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行
2. IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用
3. jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

阻止默认行为

1. DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件， 才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
2. IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用
3. jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()

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

5.编码实战

6.扩展思考

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

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

• 对于非target节点则先执行捕获在执行冒泡
• 对于target节点则是先执行先注册的事件，无论冒泡还是捕获

7.参考文献

1. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
2. JS中事件冒泡与捕获

8.更多讨论

鸣谢

感谢大家观看

BY : 龚家豪|肖浩宇