JS相关 | 面试高频问题（三）| 事件委托、事件循环机制、添加事件、事件捕获、事件冒泡、垃圾回收机制、深拷贝、浅拷贝

本文链接：https://blog.csdn.net/qq_43248263/article/details/122968409

9.事件委托（★★★）

事件委托是把原本需要绑定在子元素的响应事件（click、keydown…）委托给共同的父元素，这样当子元素上的事件触发时，会一直冒泡到父元素，让父元素响应函数来处理事件。
事件委托的原理是DOM元素的事件冒泡。通过事件委托可以减少子元素的事件绑定次数，提高程序性能。

10.事件循环机制（★★★★★）event loop

讲的超好
JS是一门单线程非阻塞语言，由于它最初的用途是与浏览器交互，需要进行各种各样的dom操作，为了保证程序的一致性，只采用一个主线程来执行代码。
怎么实现非阻塞？event loop事件循环
js执行代码会把不同的变量放在不同的地方：1.堆heap存放对象；2.栈stack存放基础类型的变量和对象的指针（引用的关系）。

异步和多线程的实现是通过事件循环来完成的。
在这里插入图片描述
1 遇到执行函数，压入调用栈中执行，完成过后弹出
2 JS中的异步操作，比如fetch，事件回调，setInterval()，setTimeout()，异步操作里的回调函数会被压入==消息队列（宏任务）==中，在调用栈清空的时候执行，这也是为什么setTimeout有最少的延迟时间。
在这里插入图片描述
具体，

浏览器由很多模块组成，有解析html和css的模块，有解析js的模块，有定时器模块，有ajax模块。
其中v8引擎就是用来解析js的，js是单线程是因为v8引擎是单线程，当v8引擎解析到异步代码时，比如定时器，就会把异步代码交给相关的模块处理，处理完之后，再交给事件队列中排队，当执行栈有空时，消息队列就把事件交给调用栈执行。
拿定时器来说，当v8引擎从上往下执行代码，读到定时器的时候。就会把定时器交给定时器模块处理，然后v8引擎继续执行代码，定时器模块会计时，当时间到了，就会把任务交给事件队列，当执行栈有空闲时，事件队列就会把任务推给执行栈，执行栈执行完毕之后将其弹出

3 new Promise()，new MutaionObserver()
，await。。。会被压入微任务队列中，调用栈执行完毕后立即执行微任务队列

在这里插入图片描述

优先级是**调用栈>微任务>消息队列（宏任务）**咯
当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

11.添加事件、事件捕获、事件冒泡（★★★★★）

1. 添加事件
这里有 3 种分配事件处理程序的方式：

HTML 特性（attribute）：οnclick="…"。
<input value="Click me" onclick="alert('Click!')" type="button">
DOM 属性（property）：elem.onclick = function。
方法（method）：elem.addEventListener(event, handler[, phase])用于添加，removeEventListener 用于移除。

HTML 特性很少使用，因为 HTML 标签中的 JavaScript看起来有些奇怪且陌生。而且也不能在里面写太多代码。

DOM 属性用起来还可以，但我们无法为特定事件分配多个处理程序。在许多场景中，这种限制并不严重。

最后一种方式是最灵活的，但也是写起来最长的。有少数事件只能使用这种方式。例如 transtionend 和 DOMContentLoaded（上文中讲到了）。addEventListener 也支持对象作为事件处理程序。在这种情况下，如果发生事件，则会调用 handleEvent 方法。

2.事件冒泡