共计 3049 个字符，预计需要花费 8 分钟才能阅读完成。
常识储备：
（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 浏览器：
三、待更新……
火狐浏览器：