【前端面试--JS】=＞谈谈事件冒泡、事件捕获和事件委托(1)

最新推荐文章于 2024-06-11 10:34:04 发布

2401_84433535

最新推荐文章于 2024-06-11 10:34:04 发布

阅读量521

点赞数 18

分类专栏：程序员文章标签：前端面试 javascript

本文链接：https://blog.csdn.net/2401_84433535/article/details/138361637

版权

程序员专栏收录该内容

180 篇文章 0 订阅

订阅专栏

前言

事件冒泡、事件捕获、事件委托、事件绑定可以说是JavaScript基础中最为重要的知识点

公司：腾讯

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

包括三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

我们知道，在dom模型中，html是多层次的，当一个html元素上产生事件时，该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个节点，都会收到这个事件，这就是dom事件流。当事件发生后，就会从内向外逐级传播，因为事件流本身没有处理事件的能力，所以，处理事件的函数并不会绑定在该事件源上。例如我们点击了一个按钮，产生了一个click事件，click事件就会开始向上传播，一直到到处理这个事件的代码中。

事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。

注意:

JS代码只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
addEventListener (type, listener[, useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段电泳事件处理程序。
在实际开发中，我们很少使用事件捕获(低版本ie不兼容)，我们更关注事件冒泡
有些事件是没有冒泡的，比如onblur、onfocus、onmouseover、onmouseleave
虽然事件冒泡有时候会带来麻烦，但是有时候又会巧妙的做某些事情，我们后面讲解

事件对象

event 就是一个事件对象，写道我们的侦听函数的小括号里面，当形参来看
事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
事件对象是我们的事件的一系列相关数据的集合，比如鼠标点击里面就包含了鼠标的相关信息
这个事件对象我们可以自己命名，比如 event、evt 、e 等
事件对象也有兼容性问题。 IE 6、7、8通过 window.event 实现

兼容性写法：

event = event || windoe.event;

事件对象常见额属性和方法

事件对象属性方法	说明
`e.target`	返回触发事件的对象标准
e.scrElement	返回触发事件的对象非标准 IE 6 7 8 使用
e.type	返回事件的类型，比如click、mouseover等，不带 on
e.cancelBubble	该属性阻止冒泡，非标准，IE 6 7 8 使用
e.returnValue	该属性阻止默认事件（默认行为）非标准，IE 6 7 8 使用，比如不让链接跳转
`e.preventDefaule()`	`该方法阻止默认事件（默认行为）标准，比如不让链接跳转`
`e.stopPropagation()`	`阻止冒泡，标准`

e.target 和 this 的区别

this 返回的是绑定事件的对象（元素）

e.target 返回的是点击的那个对象，就是谁触发了这个事件,如点击事件->谁被点了

var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
    console.log(this);
    console.log(e.target);
})

// <ul>...</ul>
// <li>123</li>

阻止对象默认行为（重）

三种方法：

e.preventDefaule();
是一个方法，适合普通浏览器
e.returnValue; 是一个属性，适用于 IE 6 7 8
return false;
没有兼容性问题，但是需要注意后面的语句就不执行了，直接跳出

阻止冒泡（重）

event.stopPropagation(); // 一般浏览器停止冒泡
event.cancelBubble; // IE 6 7 8 的停止冒泡

var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('click', alertName, false);
son.addEventListener('click', alertName, false);
document.addEventListener('click',function () {
    alert('document');
}, false);
function alertName (event) {
    alert(this.getAttribute("class"));
    event.stopPropagation();    // 停止冒泡
    event.cancelBubble;         // IE 6 7 8 的停止冒泡
}


### 最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**96道前端面试题：**

- ![](https://img-blog.csdnimg.cn/img_convert/c99758d995cac0dfe85664755e248768.webp?x-oss-process=image/format,png)

**常用算法面试题：**

- ![](https://img-blog.csdnimg.cn/img_convert/8f261b9a0d3e349afe6fc533f8c1119f.webp?x-oss-process=image/format,png)

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**


- [外链图片转存中...(img-yNshfLZa-1714500244370)]

**常用算法面试题：**

- [外链图片转存中...(img-S58rwlKP-1714500244371)]

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**

- ![](https://img-blog.csdnimg.cn/img_convert/05823cdbca4a5fd8525dd9bf53075e84.webp?x-oss-process=image/format,png)