盘点Javascript DOM事件高级

67 阅读1分钟

注册事件有两种方式:传统方式和方法监听注册模式。

传统注册方式对同意元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。

方法监听注册方式可以对同一个元素同一个事件可以注册多个监听器,一般选择使用第二种方式

DOM事件流理论

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。

DOM事件流分为3个阶段:

1.捕获阶段。2.当前目标阶段。3.冒泡阶段

addEventlistener 事件监听方式

image.png

type:事件类型字符串,比如:click、mouseover(这里不带on) listener:事件处理函数,事件发生时,会调用该监听函数 useCapture:可选参数,是一个布尔值,默认值是false。

方法监听流删除事件方式

image.png

事件对象使用语法

image.png

事件委托

事件委托也称为事件代理,不是每一个节点单独设置监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。 让我们只操作一次DOM,提高了程序性能。

常用事件对象

image.png

image.png