浅析js中事件冒泡与事件捕获浅析js中事件冒泡与事件捕获

01-事件冒泡

1.1-事件冒泡介绍
1.2-事件冒泡利用（事件委托）
1.3-事件冒泡影响与阻止事件冒泡

02-事件捕获

1.1-事件捕获介绍
1.2-事件三个阶段

01-事件冒泡

1.1-事件冒泡介绍

本小节知识点：介绍什么是事件冒泡

事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发

元素->父元素->body->html->document->window

事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件

事件冒泡 - 锐客网.parent {position: relative; width: 200px; height: 200px; background-color: pink; }.son {position: absolute; left: 400px; top: 300px; width: 100px; height: 100px; background-color: red; }

1.2-事件冒泡利用（事件委托）

本小节知识点：介绍事件冒泡的好处
? 事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后
通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件

事件冒泡 - 应用 - 事件委托 - 锐客网li {margin: 20px 0; }
百里守约1
百里守约2
百里守约3

1.3-事件冒泡影响与阻止事件冒泡

本小节知识点：介绍事件冒泡的影响

事件冒泡会导致需求冲突：例如我想要添加一个功能，弹出登录窗之后点击body空白区域让登陆窗消失
此时a标签弹出登录窗的点击事件会触发body的点击事件，导致登陆窗一出来就消失

解决方案：阻止事件冒泡（下一小节知识点）

本小节知识点：阻止事件冒泡

阻止事件冒泡：让同名事件不要在父元素中冒泡（触发）

* 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件

语法：事件对象.stopPropagation() IE8及之前不支持
【浅析js中事件冒泡与事件捕获】事件对象.cancelBubble = true IE8之前支持
注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象

事件冒泡 - 影响 - 阻止事件冒泡 - 锐客网* {margin: 0; padding: 0; }a {text-decoration: none; display: block; width: 200px; margin: 20px auto; }.form {position: relative; width: 400px; height: 200px; margin: 0 auto; text-align: center; border: 1px solid #ccc; display: none; }.form span {display: block; position: absolute; right: -25px; top: -25px; width: 50px; height: 50px; text-align: center; line-height: 50px; border: 1px solid #ccc; border-radius: 50%; background-color: #fff; cursor: pointer; }点我显示登录框X用户名:
密码:

02-事件捕获

1.1-事件捕获介绍

本小节知识点：事件捕获