在前端中，js和HTML的交互是通过事件来实现的。事件也可以理解为用户在浏览页面的一些操作，如点击鼠标，移动鼠标，按下键盘等操作。
想要在成为一名出色的前端工程师，了解DOM的事件机制是必备知识。而了解DOM，我觉得从以下几个方面入手更能快速的掌握：事件流，事件处理程序(这只是DOM中最为基础也是最为重要的一部分)。
一 、事件流
PS:有兴趣的可以了解下浏览器的发展史，更能容易理解事件流的概念。
事件流及为接收事件的顺序，早起浏览器是IE和Netscape两大团队，也是他们提出了事件流的概念，但两者的理念却是背道而驰。
IE事件流：
1.现在主流浏览器都支持的也称为事件冒泡。
2.传播方式，是向上传播。由最具体的元素传递事件给其父元素.....一直到document元素（后期许多浏览器直接到window对象上。）
事件捕获：
传播方式，是向下传播（为方便理解，自己总结的名称）。及由document开始一直传播到最具体的元素。只有Netscape浏览器厂家支持此种事件流。
DOM2级事件流：
W3C定义的DOM规范中定义了事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
二 事件处理程序
HTML事件处理程序
在HTML中直接添加事件如：<input type="button" οnclick="showMsg()" />
HTML事件处理可以直接在事件中访问自身的属性。优点是在form元素中不用引用表单元素就能访问到form元素中的其他属性。
如：
<form>
<input type="text" value=''test" name="username" />
<input type="button" οnclick="username.value" />
<form/>可以直接访问。
DOM0级事件处理程序
DOM0级事件处理是通过JavaScript指定事件处理程序的传统方式。及先用JavaScript去掉dom元素，在用此属性调用事件并将其赋值给一个函数。
如：
<input type="button" id=“btn” />
<script>
var btn=document.getElementById("btn");
btn.οnclick=function(）{}
<script/>
删除方式，通过指定事件函数为null如：btn.οnclick=null;
DOM2级事件处理程序
DOM2级事件处理就是我们常说的事件绑定，与DOM0级相似只是在事件绑定的写法上应该如下：
btn.addEventListener("click",function(){});
与DOM0的区别是：DOM2绑定的事件可以多次执行不同的方法。DOM2删除事件需要调用removeEventListener（“onclick”,funName）;
如：
<input type="button" id=“btn” />
<script>
var btn=document.getElementById("btn");
function func(){
alert(this.id)
}
btn.addEventListener("click",func);
btn.removeEventListener("click",func);
<script/>
