在你的印象里是不是这样的target.addEventListener(type, listener[, useCapture])
新的语法
-
target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]);
- type 表示监听事件类型的字符串
- listener 当所监听的事件类型触发时，会接收到一个事件通知
- options (可选)
- capture 表示listener会在该类型的事件捕获阶段传播到该EventTarget 时触发。
- once 表示listener在添加之后最多只调用一次。如果是 true，listener会在其被调用之后自动移除。
- 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