在你的印象里是不是这样的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.cn">首页</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