JS只DOM篇事件处理程序

事件处理程序又叫事件侦听器，指的是事件绑定的函数。事件处理程序有HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序三类

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与之相应事件处理程序同名的HTML特性来指定

在事件处理程序函数内部，this值等于事件的目标元素

<div id="box" style="height:30px;200px;background-color:pink;"onclick = "this.innerHTML+= '1';"></div>

在HTML中定义的事件处理程序也可以调用在页面其他地方定义的脚本

<div id="box" style="height:30px;200px;background-color:pink;"onclick = "test()"></div>
<script>
    function test(){box.innerHTML+= '1';}    
</script>

HTML事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，通过event变量，可以直接访问事件对象

<div id="box" style="height:30px;200px;background-color:pink;"onclick = "this.innerHTML+= event.type;"></div>

在事件处理程序函数内部，可以像访问局部变量一样访问document及该元素本身的成员

<div id="box" style="height:30px;200px;background-color:pink;" title="box" onclick = "this.innerHTML+= title"></div>

HTML事件处理程序之所以不常用，主要是有以下缺点：

1. 时差问题。当DOM加载完成后，事件处理程序有可能尚不具备执行条件，此时触发相应的事件会报错
2. 耦合问题。把HTML和JS混合在一些，不利于后期维护

DOM0级事件处理程序

DOM0级事件处理程序就是将一个函数赋值给一个事件处理程序属性

<div id="box" style="height:30px;200px;background-color:pink;"></div>
<script>
box.onclick = function(){this.innerHTML += '1';}    
</script>    

可以通过将事件处理程序属性设置为null来删除事件处理程序

box.onclick = null;

注意： 通过DOM0级方式添加的事件处理程序会在事件流的冒泡阶段被处理

DOM0级事件处理程序的缺点是每个事件目标对于每种事件类型只能添加一个事件处理程序

DOM2级事件处理程序

DOM2级事件处理程序定义了两个方法用于添加和删除事件处理程序的操作：addEventListener()和removeEventListener()

这两个方法都接受3个参数：事件名、事件处理程序和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。若最后的布尔值不填写，则和false效果一样

DOM2级事件处理程序可以添加多个事件处理程序，并按照他们添加的顺序触发，这一点DOM0级是不支持的

<div id="box" style="height:30px;200px;background-color:pink;"></div>
<script>
box.addEventListener('click',function(){this.innerHTML += '1'},false);
box.addEventListener('click',function(){this.innerHTML += '2'},false);    
</script> 

如果需要向监听函数传递参数，可以用匿名函数包装一下监听函数

<div id="box" style="height:30px;200px;background-color:pink;"></div>
<script>
box.addEventListener("click",function(){
  test('123');
},false);

function test(x){box.innerHTML += x;}
</script>

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。

有效写法：

<div id="box" style="height:30px;200px;background-color:pink;"></div>
<script>
var handle = function(){this.innerHTML += '1'};
box.addEventListener("click",handle,false);
box.removeEventListener('click',handle,false);    
</script>

无效写法：

<div id="box" style="height:30px;200px;background-color:pink;"></div>
<script>
box.addEventListener("click",function(){
  this.innerHTML += '1'
},false);

box.removeEventListener('click',function(){
  this.innerHTML += '1'
},false);    
</script>