你不知道的passive event listener-让移动端滑动体验起飞（优化页面滑动）

原文链接：https://blog.csdn.net/fesfsefgs/article/details/107852438

主旨:

1. addEventListener第三个参数除了可以是一个boolean类型外，还可以是一个options配置对象！！

addEventListener(type, listener, useCapture);
addEventListener(type, listener, options);
/*
{
	capture: Boolean, // 表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发

	once: Boolean, // 表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
	
	passive: Boolean, // 设置为true时，表示`listener`永远不会调用`preventDefault()`。如果`listener`仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告
}
*/

2. 添加passive参数后，touchmove事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）
   你可以这么理解： 当你触摸滑动页面时，页面应该跟随手指一起滚动。而此时你绑定了一个 touchmove 事件，你的事件大概执行 200 毫秒。这时浏览器就犯迷糊了：如果你在事件绑定函数中调用了 preventDefault，那么页面就不应该滚动，如果你没有调用 preventDefault，页面就需要滚动。但是你到底调用了还是没有调用，浏览器不知道。只能先执行你的函数，等 200 毫秒后，绑定事件执行完了，浏览器才知道，“哦，原来你没有阻止默认行为，好的，我马上滚”。此时，页面开始滚。
   所以设置{ passive: true }的意义是
   告诉浏览器立马滚动，不用等200毫秒后确认了，我根本就没有preventDefault，此时你滚动起来再也没有延迟感了，舒服了