addEventListener(),接收3个参数
第一个参数event(监听的事件)
第二个参数是函数fn(需要执行的事)
第三个参数可以是布尔值也可以是对象
本篇文章着重分析他的第三个参数
在addEventListener事件委托中第三个参数,可以设置为bool类型(useCapture)或者object类型(options)。
- object类型(options)包括三个布尔值选项:
- capture: 默认值为 false---即使用事件冒泡,true---使用事件捕获;
- once: 默认值为false---并非只调用一次,true---会在调用后自动销毁listener(即只调用一次)
- passive:不同浏览器默认值不同。true---listener永远不远调用preventDefault方法。根据规范,默认值为false。 但是chrome, Firefox等浏览器为了保证滚动时的性能,在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true, 保证了在页面滚动时不会因为自定义事件中调用了preventDefault而阻塞页面渲染。
- bool类型(useCapture): 默认值为false(即使用事件冒泡),与capture用法相同。
示例代码
parent.value.addEventListener('scroll', scrollHandle, true);
parent.value.addEventListener('scroll', scrollHandle, { passive: true });