导语

在不知道哪个版本的浏览器DOM更新了addEventListener这个方法

本来这个方法的第三个参数 是useCapture，他有两个值

• true : 事件在捕获阶段知晓
• false(默认) : 事件在冒泡阶段知晓

他开始支持了第三个参数可以为对象，该对象有以下三个值

• once 表示该监听器是一次性的，使用完就被removeEventListener了
• capture 等于之前的 useCapture
• passive 这就是本章要讲的属性

passive的产生背景

在移动端中，很多开发者会监听touchmove touchstart touchend等等这些事件

但是用户操作这些事件时，会触发scroll这一默认事件，但是浏览器不知道这些touch事件里面是否使用了e.preventDefault属性

如果使用了e.preventDefault事件，会阻止scroll事件，所以这些touch事件会阻塞浏览器的滚动行为，浏览器会等待touch事件结束再进行滚动

passive带来的性能优化

当addEventListener设置了passive，相当于告诉了浏览器这个事件不会使用e.preventDefault

从而优化了浏览器性能

你可以在html中添加

docuemnt.addEventListener('touchmove',function(e){
  // 不阻止了滚动行为
  //  e.preventDefault() 
},{passive:false})


// 相当于我们
docuemnt.addEventListener('touchmove',function(e){
  
},{passive:true})