在js中给dom元素添加监听事件：
let dom1=document.getElementById("box1");
function box(that){
console.log(that);
}
dom1.addEventListener("click",function(){box(1)});
一般都是这样，但是还是有第三个参数，Boolean类型。当设置为true时，是事件捕获状态（事件从外往里执行），false时是向上冒泡状态（事件从里向外执行），默认为false，因为事件捕获太少使用了。
但是第三个参数还可以传对象，例：
dom1.addEventListener("click",function(){box(1)},{
passive:true,//告诉浏览器不用调用preventDefault()，可以执行默认行为
capture:true,//事件捕获阶段，如果此元素的子元素被触发事件时，会先执行此事件
once:true//此监听器只执行一次
});
重点passive：
告诉浏览器可以执行默认行为，这时候应该就会有个疑问：“默认的不就是执行默认行为吗？”
举个例子：
<style type="text/css">
#box1{width: 400px;height: 1500px;background-color: antiquewhite;}
</style>
<body>
<div id="box1"></div>
<script>
dom1.addEventListener("wheel",function(){
let i=1;
while(i++<1e15){
}
});
</script>
</body>
如果试了这个应该页面崩了奥
这默认行为就是页面下滑，虽然没有阻止默认行为，但是页面就是下不去了。因为浏览器无法预先知道一个监听器是否调用了preventDefault()，它需要等待监听器执行完后，再去执行默认行为，而监听器中函数执行是需要时间的，这个执行时间就是它等待的时间（就算是空函数也会有执行时间）。这样就导致页面下滑有卡顿。
加上再试一下：
dom1.addEventListener("wheel",function(){
let i=1;
while(i++<1e15){
}
},{
passive:true
});
加了passive=true浏览器就知道，不用去调用preventDefault()，就不会再等待了，直接纵向丝滑执行默认行为。
这属性尤其移动端很需要注意。
哈哈哈我觉得我的简单易懂，实践令人深刻
比较官方一点的还有视频可以看：这里
还有讲了一下兼容性的：这里
