知识储备：
（1）document.addEventListener(event, function, useCapture);
（2）window.addEventListener(event, function, useCapture);
参数详细先盗个图：
| 参数 | 描述 |
|---|---|
| event | 必需。描述事件名称的字符串。 |
| function | 必需。描述了事件触发后执行的函数。即回调函数。 |
| useCapture | 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。 |
解释：
1.第一个参数是监听的事件类型:常见的事件类型可以参见：HTML DOM 事件
打开页面后可以看到许多常见的事件：
注意：使用时，去掉前缀on，如：我要监听点击事件时，直接：document.addEventListener（'click',callback(),[true || false]）
不需要使用前缀！
2.第二个参数为回调函数，即监听到后就触发这个函数。
3.第三个参数是bool值，可以是true或者是false，可以根据传入的值来指定事件的执行方式。
给个例子：
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function showa()
{
var ida=document.getElementById('a');
alert(ida.innerText);
}
window.addEventListener("click", showa, true);
function showb()
{
var idb=document.getElementById('b');
alert(idb.innerText);
}
window.addEventListener("click", showb, false);
function showc()
{
var idc=document.getElementById('c');
alert(idc.innerText);
}
document.addEventListener("click", showc, true);
function showd()
{
var idd=document.getElementById('d');
alert(idd.innerText);
}
document.addEventListener("click", showd, false);
</script>
</head>
<body>
<a id="a">aa</a><br>
<a id="b">bb</a><br>
<a id="c">cc</a><br>
<a id="d">dd</a>
</body>
</html>弹窗顺序：acdb
捕获时true：先执行window，再执行document；
冒泡时false：事件往回传递，先执行document，再执行window。
window.addEventlistener参数为true时，先弹窗再看到页面内容，false时，先看到页面的内容，再弹窗；
document.addEventlistener参数为true时，先看到页面内容再弹窗，false时，先弹窗再看到页面内容。
【名词解释】
1.捕获：事件捕获，从dom结构上到下，window.addEventListener先document.addEventListener被捕获。
2.冒泡：事件冒泡，从dom结构底层向上传递，document.addEventListener先于window.addEventListener被触发。
在addEventListener第三个参数处可指定事件是否在捕获或冒泡阶段执行。
//这里的element表示了上面的添加监听不止只有window和document，也可以是任何元素，普通HTML通过getElement获取元素，vue中可以通过ref获取该元素，相应的添加点击事件。
element.addEventListener(【参数1】event,【参数2】function(){
},
【参数3】// true - 事件句柄在捕获阶段执行
// false- 默认, 事件句柄在冒泡阶段执行
)题外扩展：
事件的传播：
*关于事件的传播是历史遗留问题，由前网景公司和微软公司有不同的理解而发出。
-微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
-网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件．然后在向内传播给后代元素。
-W3C 综合了两个公司的方案，将事件传播分成了三个阶段（现在浏览器执行的默认标准）：
1.捕获阶段：在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获．但是默认此时不会触发事件 。
2.目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素上触发事件 。
3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
有关捕获冒泡的深一点点的探究，请看我的另一篇博文：HTML Dom事件传播：冒泡与捕获探究
正文：
一.监听滚动事件：
//函数showbtn
showbtn(){
let that = this
if(document.body.scrollTop > 400 || document.documentElement.scrollTop > 400||window.pageYOffset>400){
that.s_bTop=true
}else{
that.s_bTop=false
}
},
//监听函数this.showbtn
window.addEventListener("scroll",this.showbtn,true);//监听到document滚动则触发函数showbtn二、鼠标滑动事件：
//函数is_showNav
is_showNav(e) {
e = e || window.event;
let that = this;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
console.log("ie 谷歌 滑轮向上滚动")
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
console.log("ie 谷歌 滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
console.log("Firefox 滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
console.log("Firefox 滑轮向下滚动");
}
}
}
//滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用wheel【注：mousewheel已废弃，不建议使用】
下面两个可以同时使用，因为如果没有此事件，就不会触发，IE 谷歌没有DOMMouseScroll则不会触发，火狐有些版本没有wheel所以，为了兼容，两个都可以用。
//DOMMouseScroll监听火狐
window.addEventListener("DOMMouseScroll",this.is_showNav,true)
//wheel监听IE 谷歌
window.addEventListener("wheel",this.is_showNav,true);
运行结果：谷歌 edge浏览器：
三、待更新……
火狐浏览器：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。