JS 事件

一． 事件流

1.   事件流：描述的是从页面中接收事件的顺序。

2.   事件冒泡：（ IE 的事件流）即事件开始时由最具体的元素（文档中嵌套层级最深）接收，然后逐级向上传播到较为不具体的节点（文档）。

3.   事件捕获：不太具体的节点较早接收到事件，而最具体的节点应该最后接收到事件。

4.   DOM 事件流

三个阶段：事件捕获阶段（为截获事件提供机会）、目标阶段（实际的目标接收到事件）和事件冒泡阶段（可以在此阶段对事件做出响应）。

 

二． 事件处理

1.  HTML 事件处理程序

<input type=”button” value=”click” onclick=”alert(‘clicked’);” />

 

缺点： ① 存在时差问题。即触发的事件时，事件处理程序尚不具备执行条件。

            ② HTML 与 Javascript 代码紧密耦合。如需改动，需要改动两处。

 

2.  DOM0 级事件处理程序

var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
    alert(“clicked”);
}

此方式指定的事件处理程序认为是元素的方法，因此，事件处理程序的作用域为元素本身。

btn.onclick = null; // 删除事件处理程序 

 

 

3.  DOM2 级事件处理程序

addEventListener()   // 指定事件处理程序
removeEventListener()   // 删除事件处理程序 

params: 捕获的事件名、事件处理程序函数、布尔值（ true: 在捕获阶段调用事件处理程序； false ：在冒泡阶段调用事件处理程序）

var btn = document.getElementById(“myBtn”);
btn.addEvenetListener(“click”, function(){ alert(this.id); }, false);
btn.addEvenetListeber(“click”, function(){ alert(“hello world”; )}, false);

事件处理程序的作用域为 window 对象，而不是指元素本身。

为同一按钮添加多个事件处理程序时，会按照添加他们的顺序触发，如上例，会先显示元素 id ，然后显示 ”hello world” 。

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

 

多数情况下，将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。

 

4.   IE 事件处理程序

attachEvent()  // 指定事件处理程序
detachEvent()  // 移除事件处理程序 

params ：事件处理程序名称、事件处理程序函数（ IE 只支持事件冒泡）

var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){ alert(“clicked”); });
btn.attachEvent(“onclick”, function(){ alert(“hello world”); });

为同一元素添加了多个不同的事件处理程序，与 DOM 方法不同，这些事件处理程序是以添加它们相反的顺序触发。如上例，会先显示 ”hello world”, 然后显示 ”clicked” 。

通过 attachEvent() 添加的事件处理程序只能使用 detachEvent() 来移除，移除时传入的参数与添加处理程序时使用的参数相同，即通过 attachEvent() 添加的匿名函数将无法移除。