优化前和优化后的对比
事情的起因是在腾讯面试的时候被问到了,被吊打了,想想也不冤,以前确实从来没碰到过这样的问题,如果以前碰到过还回答不出来,我就去撞墙了
先来个场景:
<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)存在三个阶段:事件捕获阶段
、处于目标阶段
、事件冒泡阶段
。