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

优化前和优化后的对比

事情的起因是在腾讯面试的时候被问到了，被吊打了，想想也不冤，以前确实从来没碰到过这样的问题，如果以前碰到过还回答不出来，我就去撞墙了

先来个场景：

<script type="text/javascript">
		
	document.addEventListener("touchstart", function(e){
   
	    e.preventDefault()
	})
		
</script>

当你去测试时：

报错了：Unable to preventDefault inside passive event listener due to target being treated as passive

翻译过来就是： 由于目标被视为被动的，无法在被动事件监听器中阻止默认设置。

此时引出一个词：passive event listener

说这个问题之前，先复习一下addEventListener的第三个参数，你真的足够了解吗？

addEventListener 鲜为人知的第三个参数：

当我们使用addEventListener的时候，我们一般的写法是以下：

target.addEventListener(event, handler)

可能完整些写是这样

target.addEventListener(event, handler, false)

一般情况下，这第三个参数是一个布尔值，叫useCapture，是否使用事件捕获的意思，DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。