addEventListener()的第三个参数可以传对象了

在你的印象里是不是这样的target.addEventListener(type, listener[, useCapture])

新的语法

1. target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]);

   • type 表示监听事件类型的字符串
   • listener 当所监听的事件类型触发时，会接收到一个事件通知
   • options (可选)
     1. capture 表示listener会在该类型的事件捕获阶段传播到该EventTarget 时触发。
     2. once 表示listener在添加之后最多只调用一次。如果是 true，listener会在其被调用之后自动移除。
     3. passive 表示listener永远不会调用preventDefault()。如果listener仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。

实例

html结构

<nav id="menu"><a href="https://juejin.im">首页</a></nav>
复制代码

获取引用

var nav = document.getElementById('menu')
var link = nav.firstElementChild
复制代码

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

menu.addEventListener('click', function (e) {
    console.log('menu clicked!')
}, { capture: true })
link.addEventListener('click', function (e) {
    e.preventDefault();
    console.log('link clicked!')
}, { capture: false })

// menu clicked!
// link clicked!
复制代码

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

link.addEventListener('click', function (e) {
    e.preventDefault();
    console.log('link clicked!')
}, { capture: false,once:true })

//输出一次link clicked!后自动移除listener函数，再次点击无效。

复制代码

passive: 表示listener永远不会调用preventDefault()。如果listener仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告

link.addEventListener('click', function (e) {
    e.preventDefault();
    console.log('link clicked!')
}, { capture: false,passive:true })

//控制台输出:Unable to preventDefault inside 
passive event listener invocation. 
链接跳转
复制代码

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

addEventListener('touchmove', function listener() {
/* do something */ }, { passive: true });
复制代码

兼容性

浏览器	chrome	Firefox	IE
capture	49.0	49.0	未实现
passive	51.0	49.0	未实现
once	55	50	未实现

注意：那些不支持参数options的浏览器，会把第三个参数默认为useCapture，即设置useCapture为true