EventTarget.addEventListener()和passive

EventTarget.addEventListener()

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

 

 

EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素Element,Document和Window或者任何其他支持事件的对象，比如（XMLHttpRequest）

 

addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

 

语法

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted);

 

参数

type 表示监听事件类型的字符串

listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了Event接口的对象）对象。

listener必须是一个实现了EventListener接口的对象，或者是一个函数。

 

options [可选]

一个指定有关listener属性的可选参数对象，可用的选项如下：

• capture: Boolean

　　　　表示listener会在该类型的事件捕获阶段传播到该EventTarget时触发

• once: Boolean

　　　　表示listener在添加之后最多只调用一次，如果是true，listener会在其被调用之后自动移除

• passive: Boolean

　　　　设置为true时，表示listener永远不会调用preventDefault()

　　　　如果listener仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告

 

useCapture [可选]

Boolean

在DOM树中，注册了listener的元素，是否要先于它下面的EventTarget，调用该listener。当useCapture（设为true）时，沿着DOM树向上冒泡的事件，不会触发listener。

当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的的事件冒泡和事件捕获是两种不同的事件传播方式。

事件传播模式决定了元素以哪个顺序接收事件。

 

 

 

使用passive改善的滚屏性能

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E4%BD%BF%E7%94%A8_passive_%E6%94%B9%E5%96%84%E7%9A%84%E6%BB%9A%E5%B1%8F%E6%80%A7%E8%83%BD

 

根据规定，passive选项的默认值始终为false。但是，这引入了处理某些触摸事件的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低。

为防止出现此问题，某些浏览器已将文档级节点Window，Document和Document.body的touchstart和touchmove事件的passive选项的默认值更改为true. 这可以防止调用事件监听器，因此在用户滚动时无法阻止页面呈现。

var elem = document.getElementById('elem');
elem.addEventListener('touchmove', function listener() {}, { passive: true })

添加passive参数后，touchmove事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）

 

你可以通过将passive的值显式设置为false来覆盖此行为，如下所示：

/** 特征检查 */
var passiveIfSupported = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, "passive", {get: function() { passiveIfSupported = {passive: true}}}))
} catch(err) {}

window.addEventListener('scroll', function(event) {
  /** do something */
  // 不能使用event.prevebt
}, passiveIfSupported)

在不支持addEventListener()的options参数的旧浏览器上，尝试使用它会阻止使用useCapture参数而不正确使用特征检测

您无需担心基本scroll事件的passive值。由于无法取消，因此事件监听器无法阻止页面呈现。