一、引入
我们知道JavaScript的很多操作都是基于事件的监听。事件监听,就是在页面上设置了很多函数的触发规则,当用户触发事件之后,执行函数。
二、内容
addEventListener() 是一种添加事件的方式。它的参数:
addEventListener(type, listener, useCapture);
type:事件类型
listener:执行函数
useCapture:是否捕获执行
三、passiveListener
在一些事件中,我们会使用e.preventDafault();禁止掉浏览器的默认事件。只让浏览器执行我们规定的函数。一般我们会这样写:
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, false);//禁止页面滑动
问题:但是这样会带来一个问题,function执行的时候,才会去禁止浏览器的默认事件。在事件没有触发的时候,默认事件依然执行。这样有时会造成浏览器的卡顿,同时有一些默认事件无法完全禁止。
解决原理:那么我们在添加事件的时候,就明确告诉浏览器是否要禁止掉默认事件。这样在浏览器执行的时候,就一定保证事件被禁止了。
chrome51 实现了这个功能。
addEventListener(type, listener, {
capture: false,
passive: false,
once: false
})
addEventListener的第三个参数变成了一个对象。这个队形有三个参数。
capture: 表示函数是否捕获执行,
passive: 表示是否执行默认事件,true执行,false不执行
once: 是否是单次事件,如果是true,执行完事件就被销毁
ps:虽然passive明确表示了是否执行默认事件,但是函数内还是需要添加 e.preventDefault();否则无法禁止默认事件。
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false, capture: false });//禁止页面滑动
四、应用
使用passiveListener使浏览器的滚动更加流畅。
在移动端可以禁掉浏览器左右滑动的前进和后退