事件监听器-禁止浏览器的默认事件

一、引入

我们知道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使浏览器的滚动更加流畅。

在移动端可以禁掉浏览器左右滑动的前进和后退