DOM Event模型

左手的ㄟ右手 2022-01-31 01:07 177阅读 0赞

# DOM Event模型 #

参考链接https://developer.mozilla.org/zh-CN/docs/Web/API/Event

Event\` 接口表示在 DOM 中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等）。事件通常由外部源触发，同样也会以编程方式触发，事件本身包含所有事件通用的属性和方法。

一个完整的事件系统，通常存在以下三个角色：

*  事件对象，用于储存事件的状态。
 *  事件源对象，当前事件在操作的对象，如元素节点，文档对象，window对象，XMLHttpRequest对象等。
 *  事件监听器，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。在IE中，事件对象恒为全局属性window.event的分身。

完整的事件流过程

1、一个完整的事件流是从window开始，最后回到window的一个过程。

2、事件流被分为三个阶段(红色)捕获过程、（蓝色)目标过程、(绿色)冒泡过程。

捕获过程:自上而下

冒泡过程：自下而上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]

## 注册事件监听器 ##

有三种方式可以为DOM元素注册事件处理函数。

#### （1）EventTarget.addEventListener ####

//示例
    //假设myButton是一个button,false表示是否为捕获阶段，默认为false
    myButton.addEventListener('click',function(){ alert('Hello World');},false)

//语法
    target.addEventListener(type, listener[, options]);
    target.addEventListener(type, listener[, useCapture]);
    target.addEventListener(type, listener[, useCapture, wantsUntrusted  ]);  //Gecko/Mozilla

*  `type`
    
    表示监听事件类型的字符串。
 *  `listener`
    
    当所监听的事件类型触发时，会接收到一个事件通知（实现了 `Event`接口的对象）对象。`listener` 必须是一个实现了 `EventListener`接口的对象，或者是一个函数。
 *  options 可选
    
    一个指定有关 `listener`属性的可选参数**对象**。可用的选项如下：
    
    `capture`: `Boolean`，表示 `listener` 会在该类型的事件捕获阶段传播到该 `EventTarget` 时触发。
    
    `once`: `Boolean`，表示 `listener 在添加之后最多只调用一次。如果是` `true，` `listener` 会在其被调用之后自动移除。
    
    `passive`: `Boolean`，设置为true时，表示 `listener` 永远不会调用 ```preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。`` mozSystemGroup```: 只能在 XBL 或者是 Firefox’ chrome 使用，这是个 `Boolean`，表示 `listener`被添加到 system group。
 *  `useCapture` 可选
    
    `Boolean`，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当userCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。 如果没有指定， `useCapture` 默认为 false 。

**注意:** 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。在目标阶段的事件会触发该元素（即事件目标）上的所有监听器，而不在乎这个监听器到底在注册时`useCapture` 参数值是true还是false。

**注意:** `useCapture` 仅仅在现代浏览器最近的几个版本中是可选的。 例如 Firefox 6以前的版本都不是可选的。为了能够提供更广泛的支持，你应该提供这个参数。

*  `wantsUntrusted`
    
    如果为 `true`, 则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko（chrome的默认值为true，其他常规网页的默认值为false），主要用于附加组件的代码和浏览器本身。
    
    #### 事件监听回调 ####
    
    事件监听器可以被指定为回调函数或实现EventListener的对象，其handleEvent()方法用作回调函数。
    
    回调函数接受一个参数：一个基于Event的对象，描述已发生的事件，并且它不返回任何的内容。
    
    例如，一个可用于处理`fullscreenchange`和`fullscreenerror`的事件处理函数可以像这样：
    
        function eventHandler(event) { 
          if (event.type == fullscreenchange) { 
            /* handle a full screen toggle */
          } else /* fullscreenerror */ { 
            /* handle a full screen toggle error */
          }
        }

#### （2）HTML属性 ####

在属性中的JavaScript代码，是通过event参数传入Event对象的。这种方法可读性差，内容/结构 和 行为之间没有很好的分离，使得在处理bug时非常困难。

#### （3）DOM元素属性 ####

//假设myButton是一个button
    myButton.onclick=function(event){ alert('Hello World');};

该函数在定义时，可以传入一个event形式的参数，这种方法的问题在于每个元素和事件只能设置一个处理函数。

## DOM Event接口 ##

事件处理函数可以附加在各种对象上，包括DOM元素，window对象等。当事件发生时，event对象就会被创建并一次传递给事件监听器。

在处理函数中，将event对象作为第一个参数，可以访问DOM Event接口。下面简单的实例简单说明了event对象是如何传入事件处理函数，在函数中是如何被使用的。

function foo（evt）｛
    	//event对象自动传递给形参evt
    	alert（evt）;
    ｝
    table_el.onclick = foo

#### 属性 ####

###### Event.bubbles 布尔值，用于表示该事件是否在DOM中冒泡 ######

###### Event.cancelBubble 通过一个事件处理程序返回前设置这个属性值为真，来阻止事件冒泡。Event.stopPropagation()的别名 ######

Event.cancelable 布尔值，用来表示这个事件是否可以取消

Event.composed 布尔值，用来表示是否可以在阴影DOM和常规DOM之间的边界上浮动。

Event.currentTarget 当前注册事件的对象的引用，注册这个事件监听的对象，这个值可以在传递中改变

Event.deepPath 一个由事件流经过了的DOM Node组成的Array

Event.defaultPrevented 布尔值，表示了是否已经执行过event.preventDefault()

Event.eventPhase 事件流正在处理哪个阶段

Event.target 对事件起源目标的引用

Event.timeStamp 事件创建时的时间戳，毫秒级。这个时间戳是距离某个特定时刻的差值。

Event.type 事件的类型（不区分大小写）

Event.isTrusted 指明事件是否是浏览器（当用户点击实例后）或脚本（使用事件的创建方法）启动。

#### 方法 ####

event.initEvent 通过DocumentEvent的接口给创建的事件初始化某些值

event.preventDefault 取消事件（如果该事件可取消）

event.stopImmediatePropagation 对这个特定事件而言，没有其他监听器被调用。这个事件既不会添加到相同的元素上，也不会添加到以后将要遍历的元素上（例如在捕获阶段）

event.stopPropagation 停止事件冒泡

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]: /images/20220131/a3b996328b564836b86552459d6425b9.png