什么是事件
事件是在页面上可以被 JavaScript 侦测到的行为。JavaScript和HTML之间的交互是通过事件实现的。
注意:事件通常与函数配合使用,当事件发生时函数才会执行。响应某个事件的函数就是事件处理程序(事件侦听器)。
如何注册事件函数
- 通过 “on + 相应事件” 的方式直接绑定到相应的 html 上的事件。
- 添加:div.onclick = function (){ ... };
- 去除:div.onclick = null;
不存在兼容性问题,只能注册一个事件函数
- 通过事件操作函数指定和删除事件处理程序的操作:
- addEventListener()
- removeEventListener()
函数均有3个参数:
第一个参数是要处理的事件类型
第二个参数是作为事件处理程序的函数
第三个参数是一个 boolean 值,默认 false 表示使用冒泡机制,true 表示捕获机制。
可以注册多个事件函数,执行顺序按照注册顺序;去除事件时只能去除非匿名函数
事件流
事件流描述的是从页面各元素中接受事件的顺序。也称为事件传播机制。
- 捕获阶段:事件对象通过目标的祖先从窗口传播到目标的父级。此阶段也称为捕获阶段。
- 目标阶段:事件对象到达事件对象的事件目标。此阶段也称为目标阶段。如果事件类型指示事件不冒泡,则事件对象将在完成此阶段后暂停。
- 冒泡阶段:事件对象以相反的顺序在目标的祖先中传播,从目标的父级开始,以 Window 结束。