2000元阿里云代金券免费领取，2核4G云服务器仅664元/3年，新老用户都有优惠，立即抢购>>>
阿里云采购季（云主机223元/3年）活动入口：请点击进入>>>，
阿里云学生服务器（9.5元/月）购买入口：请点击进入>>>，
?个人简介：张清悠，字澄澈，号寻梦客，爱好旅行、运动，主攻前端方向技术研发，副攻Unity 3D、C++、Python人工智能等
?个人寄语：学会不为过程的缓慢而焦虑，即使暂时未能如你所愿，但只要你在努力，你就在不断成长！
?个人公众号:清悠小猿(海量源码尽在其中，欢迎关注)
一、 事件 event对象
1.1 事件的概念
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，chrome和火狐的事件流是捕获流
1.2 事件流
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，chrome和火狐的事件流是捕获流
1.3 事件冒泡
事件冒泡，即事件开始时由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上（一直到文档）；
1.4 阻止事件冒泡
event.cancelBubble=true;// IE
event.stopPropagation();// 非IE
兼容写法：
event.stopPropagation?event.stopPropagation():event.cancelBubble=true;
var btn1=document.getElementById("btn1");
var content=document.getElementById("content");
btn1.addEventListener("click",function(event){
alert("btn1");
event.stopPropagation();
},false);
content.addEventListener("click",function(){
alert("content");
},false);
//这里会输出btn1，阻止了向content的冒泡
preventDefault()——用于取消事件的默认操作,比如链接的跳转或者表单的提交，主要是用来阻止标签的默认行为
<a id="go" href="https://www.baidu.com/">禁止跳转</a>
var go = document.getElementById('go');
function goFn(event) {
event.preventDefault();
// 不会跳转
}
go.addEventListener('click', goFn, false);
1.5 事件捕捉
事件的捕获是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流失最外层逐级向内传播。
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
1.6 DOM 0级事件处理程序
分为2个：一是在标签内写onclick事件
二是在JS写onlicke=function（）{}函数
1级DOM--(为什么没有1级DOM)
DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型
1.7 DOM 2级事件处理程序（不支持IE）
监听方法，有两个方法用来添加和移除事件处理程序：
addEventListener()和removeEventListener()。
函数均有3个参数，
第一个参数是要处理的事件名(不带on前缀的才是事件名)
第二个参数是作为事件处理程序的函数
第三个参数是一个boolean值，默认false表示使用冒泡机制，true表示捕获机制。
<button id="btn">点击</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener('click',hello，false);
btn.addEventListener('click',helloagain，false);
function hello(){
alert("hello");
}
function helloagain(){
alert("hello again");
}
</script>
这样的话，事件处理程序只会执行一次。
但是要注意，如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰。
这时候的this指向该元素的引用。
这里事件触发的顺序是添加的顺序。
1.8 IE 事件处理程序
对于 Internet Explorer 来说，在IE 9之前，你必须使用 attachEvent 而不是使用标准方法 addEventListener。
IE8及以下版本浏览器实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。
它们都接收两个参数：
1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。
2.事件处理程序函数。
之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。
removeEventListener()的方法几乎和添加时用法一摸一样：
<button id="btn">点击</button>
<script>
var btn=document.getElementById("btn");
btn.attachEvent('onclick',hello);
btn.detachEvent('onclick',hello);
function hello(){
alert("hello");
}
</script>
总结
```
以上就是今天带你走进从零认识JavaScript到精髓（十七）JavaScript的事件event对象上
会持续更新中…
原创不易，期待您的点赞关注与转发评论???
