浅谈DOM中事件机制

在前端中，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/>