大家好，我是IT修真院北京分院第20期的学员王野，一枚正直纯洁善良的程序员
今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——如何阻止事件冒泡和默认事件？
一、背景介绍
事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
默认行为
浏览器的一些默认的行为。例如：点击超链接跳转，点击右键会弹出菜单，滑动滚轮控制滚动条
二、知识剖析
事件冒泡有什么作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
三、常见问题
如何阻止事件冒泡和默认事件?
四、解决方案 编码实战
阻止事件冒泡
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()
阻止链接跳转
同时阻止事件冒泡和默认行为
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。
这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。
阻止冒泡事件和默认事件
六、参考文献
七、更多讨论
1、return=false可以阻止那一层的事件冒泡？
写在那一层里就阻止其冒泡行为。比如上面的例子，写在“three”中时，点击“three”就不会弹出提示框，但是点击“two”一样会弹出“two”和“one”
2、事件冒泡用在哪里呢？
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。简单来说，当一个<ul>标签中有需对<li>标签时，我想知道点击了哪一个<li>标签，那么就可以在绑定一个冒泡事件，提示点击了哪一个标签，而不用每个都单独绑定事件
3、什么是事件捕获？
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
简单来讲，事件捕获的层次顺序是由浅入深，事件冒泡的顺序是由深到浅。
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论