浏览器-事件模型

Posted 2021-06-02 natsu-cc

前言：

---

事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现，DOM 支持大量的事件。

EventTarget 接口：

---

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

EventTarget.addEventListener()：（绑定事件的监听函数）

EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。

// type：事件名称，大小写敏感。
// listener：监听函数。事件发生时，会调用该监听函数。
// useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（监听函数只在冒泡阶段被触发）。该参数可选。
target.addEventListener(type, listener, useCapture);

EventTarget.removeEventListener()：（移除事件的监听函数）

EventTarget.removeEventListener()方法用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。

// 参数和addEventListener一样
target.removeEventListener(type, listener, useCapture);

removeEventListener移除监听事件的注意事项：

• 必须是addEventListener方法添加的那个监听函数（匿名函数无效）。
• 必须在同一个元素节点。
• 必须三个参数和addEventListener方法的一致。
  
  

EventTarget.dispatchEvent()：（触发事件）

EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。

var event = new Event(type);
target.dispatchEvent(event)

注意：如果dispatchEvent方法的参数为空，或者不是一个有效的事件对象，将报错。

监听函数：

---

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。

html 的 on- 属性：

HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。

<div onclick="doSomething()">
//	两者效果一样
el.setAttribute('onclick', doSomething());

代码为div节点的click事件，指定了监听代码。一旦事件发生，就会执行这段代码。

元素的事件监听属性，都是on加上事件名，比如onclick就是on + click，表示click事件的监听代码。

注意：属性的值是将会执行的代码，而不是一个函数，因此如果要执行函数，不要忘记加上一对圆括号。方法在冒泡阶段触发，即事件从子元素开始冒泡到父元素。

元素节点的事件属性：

元素节点对象的事件属性，同样可以指定监听函数。

div.onclick = doSomething;

注意：这种方法与 HTML 的on-属性的差异是，它的值是函数名（doSomething），而不像后者，必须给出完整的监听代码（doSomething()），而且同样只会在冒泡阶段触发。

EventTarget.addEventListener()：

所有 DOM 节点实例都有addEventListener方法，用来为该节点定义事件的监听函数。

window.addEventListener('click', doSomething, false);

小结：

• “HTML 的 on- 属性”，违反了 HTML 与 javascript 代码相分离的原则，将两者写在一起，不利于代码分工，因此不推荐使用。
• “元素节点的事件属性”的缺点在于，同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。因此，也不推荐使用。
• EventTarget.addEventListener是推荐的指定监听函数的方法。
  1、同一个事件可以添加多个监听函数。
  2、能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。
  3、除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。

this 的指向：

---

监听函数内部的this指向触发事件的那个元素节点。

//	写法一
<button id="btn" onclick="console.log(this.id)">点击</button>

// HTML 代码如下
<button id="btn">点击</button>

// 写法二
var btn = document.getElementById('btn');
btn.onclick = function () {
  console.log(this.id);
};

// 写法三
var btn = document.getElementById('btn');
btn.addEventListener(
  'click',
  function (e) {
    console.log(this.id);
  },
  false
);

三者点击按钮同样输出btn。

事件的传播：

---

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：

• 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
• 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
• 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

示例：

<div>
  <p>点击</p>
</div>

var phases = {
  1: 'capture',
  2: 'target',
  3: 'bubble'
};

var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);

function callback(event) {
  var tag = event.currentTarget.tagName;
  var phase = phases[event.eventPhase];
  console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}

// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'

click事件被触发了四次：<div>节点的捕获阶段和冒泡阶段各1次，<p>节点的目标阶段触发了2次。

• 捕获阶段：事件从<div>向<p>传播时，触发<div>的click事件；
• 目标阶段：事件从<div>到达<p>时，触发<p>的click事件；
• 冒泡阶段：事件从<p>传回<div>时，再次触发<div>的click事件。

事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p，在冒泡阶段依次为p、div、body、html、document、window。

事件的代理：

---

事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

示例：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

click事件的监听函数定义在<ul>节点，但是实际上处理的是子节点<li>的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个<li>节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。

若想事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。

// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, true);

// 事件冒泡到 p 元素后，就不再向上冒泡了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, false);

stopPropagation方法分别在捕获阶段和冒泡阶段，阻止了事件的传播。注意stopPropagation方法只会阻止该click事件的传播，并不会阻止所有click事件的传播。若想实现后面所有click事件不再传播，可使用stopImmediatePropagation方法。

Event 对象概述：

---

事件触发以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。

//	Event对象本身就是一个构造函数
event = new Event(type, options);

Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。

• bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
• cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。

var ev = new Event(
  'click',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);

该事件设置bubbles为true，这样子元素触发的事件才会冒泡传播到父元素当中。

Event 对象的实例属性：

---

Event.bubbles，Event.eventPhase：

Event.bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性，一般用来了解 Event 实例是否可以冒泡。（默认不冒泡）

Event.eventPhase属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。

Event.eventPhase的四个状态：

• 0，事件目前没有发生。
• 1，事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。
• 2，事件到达目标节点，即Event.target属性指向的那个节点。
• 3，事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。
  
  

Event.cancelable，Event.cancelBubble，event.defaultPrevented：

Event.cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性。

var ev= new Event('click');
ev.cancelable  // false

Event.cancelable属性为true时，调用Event.preventDefault()就可以取消这个事件，阻止浏览器对该事件的默认行为。如果事件不能取消，调用Event.preventDefault()会没有任何效果。

Event.cancelBubble属性是一个布尔值，如果设为true，相当于执行Event.stopPropagation()，可以阻止事件的传播。

Event.defaultPrevented属性返回一个布尔值，表示该事件是否调用过Event.preventDefault方法。该属性只读。

Event.currentTarget，Event.target：

Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。

Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象。

Event.type：

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读。

var ev = new Event('click');
ev.type //click

Event.timeStamp：

Event.timeStamp属性返回一个毫秒时间戳，表示事件发生的时间。它是相对于网页加载成功开始计算的。

Event.isTrusted：

Event.isTrusted属性返回一个布尔值，表示该事件是否由真实的用户行为产生。比如，用户点击链接会产生一个click事件，该事件是用户产生的；Event构造函数生成的事件，则是脚本产生的。

Event.detail：

Event.detail属性只有浏览器的 UI （用户界面）事件才具有。该属性返回一个数值，表示事件的某种信息。具体含义与事件类型相关。

Event 对象的实例方法：

---

Event.preventDefault():

Event.preventDefault方法取消浏览器对当前事件的默认行为。前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

注意，该方法只是取消事件对当前元素的默认影响，不会阻止事件的传播。如果要阻止传播，可以使用stopPropagation()或stopImmediatePropagation()方法。

Event.stopPropagation()：

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

Event.stopImmediatePropagation()：

Event.stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比Event.stopPropagation()更彻底。

Event.composedPath()：

Event.composedPath()返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。

CustomEvent 接口：

---

CustomEvent 接口用于生成自定义的事件实例。那些浏览器预定义的事件，虽然可以手动生成，但是往往不能在事件上绑定数据。如果需要在触发事件的同时，传入指定的数据，就可以使用 CustomEvent 接口生成的自定义事件对象。

//	浏览器原生提供CustomEvent()构造函数
new CustomEvent(type, options)

CustomEvent()构造函数接受两个参数:

• 第一个参数是字符串，表示事件的名字，这是必须的。
• 第二个参数是事件的配置对象，这个参数是可选的。CustomEvent的配置对象除了接受 Event 事件的配置属性，只有一个自己的属性。

示例：

var event = new CustomEvent('say', 
	{ 
		detail: 'hello world',
		bubbles: true,
  		cancelable: false
	}
);

document.body.addEventListener('say', function (e) {
  console.log(e.detail);
});

document.body.dispatchEvent(event);

CustomEvent 的事件实例，除了具有 Event 接口的实例属性，还具有detail属性。