我的JavaScript笔记——二、事件的冒泡和捕获(重点)及如何取消冒泡

二、事件的冒泡和捕获(重点)

1.什么是事件?

简单来说:就是用户与浏览器窗口发生交互的过程。列如:鼠标点击、鼠标滑入滑出、滚轮、键盘输入……

2.事件的冒泡

以烂大街的点击事件为例(代码简单就不写了看着也烦)

在这里插入图片描述

2.1 什么是事件冒泡?

即当发生事件时,由最部的元素接收,然后逐级向传播

看上图
当我们点击 a
a 会先响应并触发点击事件
然后 p 响应并触发点击事件
然后是 li => ul => body => html 逐级向上
这个过程就是事件的冒泡

2.2 什么是事件捕获?

即当发生事件时,由最部的元素接收,然后逐级向传播

捕获就是冒泡相反
当我们点击 a
最外层的 html 会先响应并触发点击事件
然后 body 响应并触发点击事件
然后是 ul => li => p => a 逐级向下
这个过程就是事件的捕获

2.3 如何取消冒泡呢?

浏览器默认情况下是会冒泡的,当我们需要取消时,

方法一: 在定义的事件回调函数的后面加上 return false

a.onclick = function(){
    
    
alert('a被点击了');
return false;
}

方法二:通过事件对象 event取消

a.onclick = function(event){
    
    
alert('a被点击了');
event. cancelBubble=true;
}

猜你喜欢

转载自blog.csdn.net/ZLJ_999/article/details/123962205