JavaScript事件相关知识点学习笔记

最新推荐文章于 2021-03-20 00:07:09 发布

原创最新推荐文章于 2021-03-20 00:07:09 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析DOM事件流机制，涵盖事件的捕获与冒泡、事件监听、事件对象的使用及事件委托技巧，同时探讨了事件循环机制及其在JavaScript中的应用。

JavaScript事件知识点

DOM事件的级别
DOM事件流
事件捕获和事件冒泡
事件监听
事件对象
事件委托
事件循环机制

今天看到一道面试题： 网页中接收事件的顺序（事件流）有哪些？它们之间的区别是什么？
所以整理了关于事件的一些知识点，方便日后回顾复习

DOM事件的级别

0级：on-event（一个元素的同一种事件只能绑定一个事件，绑定多个则会覆盖）
2级：addEventListener绑定(和上者相反，一对多且按顺序执行)，第一个参数是事件名（如click）；第二个参数是事件处理程序函数；第三个参数如果是true的话表示在捕获阶段调用，为false的话表示在冒泡阶段调用
3级：在2级的基础上增添了更多类型的事件（焦点、鼠标、滚轮……）

DOM事件流

当一个事件发生后，在传播过程中分为三个阶段：捕获阶段、目标阶段、冒泡阶段

事件捕获和事件冒泡

// An highlighted block
<!DOCTYPE html>
<html>
<head>
	<title><title>
</head>
<body>
	<div id="myDiv">Click Me</div>
</body>
</html>

事件捕获：从启动事件的元素节点开始，逐层向下传递
事件冒泡：从启动事件的元素节点开始，逐层向上传递
两种机制都会执行

检验事件流可以通过addEvetListener绑定click事件

事件监听

addEventListener()基本上有三个参数，分别是事件名称、事件的处理程序(事件触发时执行的function)，以及一个Boolean值，由这个Boolean决定事件是以捕获还是冒泡机制执行，若不指定则预设为冒泡。

事件对象

DOM中的事件对象

无论指定事件处理程序时使用什么方法，都需要传入event对象
event对象的target、currentTarget和元素的this关系：在事件处理程序内部，对象this始终等于currentTarget的值，而target只包含事件的实际目标。
要阻止特定事件的默认行为，可以使用preventDefault()方法，当然，只有cancelable（event对象的一个属性）为true的事件，才可以使用preventDefault()来取消其默认行为
stopPropagation()用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡

事件委托

对事件处理程序过多问题的解决方案称为事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。可以这么来想，根据事件冒泡的原理，从click事件一直冒泡到document，那么就可以通过为整个页面指定一个onclick事件处理程序，而不用给每个可单击的元素分别添加了。使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序。最适合使用事件委托技术的事件包括：click、mousedown、mouseup、keydown、keyup和keypress

事件循环机制

JavaScript调用栈：后进先出，当函数被调用时则压入栈，执行完毕后移出栈，直到栈被清空
同步/异步任务：同步任务在调用栈用按顺序等待主线程执行。而异步任务会将相关回调添加到任务队列（先进先出）中，当主线程空闲或者调用栈被清空时，任务队列中的任务将会被读取到调用栈中等待主线程执行。
Event Loop：调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行。