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>
  • 事件捕获:从启动事件的元素节点开始,逐层向下传递
    JavaScript事件相关知识点学习笔记_第1张图片
  • 事件冒泡:从启动事件的元素节点开始,逐层向上传递
    JavaScript事件相关知识点学习笔记_第2张图片
  • 两种机制都会执行
    JavaScript事件相关知识点学习笔记_第3张图片
    检验事件流可以通过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:调用栈中的同步任务都执行完毕,栈内被清空了,就代表主线程空闲了,这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空,都会去读取任务队列有没有任务,有就读取执行。

你可能感兴趣的:(javascript,javascript)