一、事件流
1. 事件流：
事件流描述的是從頁面中接收事件的順序。ie 的事件流是事件冒泡流，netscape 的事件流是事件捕獲流。
2. 事件冒泡流：
ie 的事件流叫事件冒泡，即事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文件）。
若點選了頁面中的某個div，則該click事件會按如圖所示的順序傳播
click首先在 div 元素上發生，而這個元素是我們點選的元素。之後，click事件沿dom樹向上傳播，在每一級節點上都會發生，直至傳播到document物件。
3. 事件捕獲流
netscape 的事件流叫事件捕獲，事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預定目標之前捕獲它。
在事件捕獲過程中，document物件首先接收到click事件，然後事件沿dom樹依次向下，一直傳播到事件的具體目標，即 div 元素。捕獲的順序如圖所示
4. dom 事件流
『dom2級事件』規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然後是實際的目標接收到事件。最後是冒泡階段，在這個階段對事件作出響應。
二、事件處理程式
響應某個事件的函式就叫事件處理程式（事件偵聽器）。事件處理程式的名字以『on』開頭，所以click的事件處理程式是onclick，load的事件處理程式是onload。為事件制定處理程式有如下幾種方式：
（1）html 事件處理程式
1（2）dom0級事件處理程式<
input
type
="button"
onclick
="alert('hello world')"
>
2<
input
type
="button"
onclick
="handle()"
>
3<
script
>
4function
handle()
7script
>
1使用dom0 級方法指定的事件處理程式被認為是元素的方法。因此，此時事件處理程式實在元素的作用域中執行，即程式中的this引用當前元素。例如：var btn = document.getelementbyid('btn');
2 btn.onclick = function
()
1在事件處理程式中可以通過 this 訪問元素的任何屬性和方法，以這種方式新增的事件處理程式會在事件流的冒泡階段被處理。var btn = document.getelementbyid('btn');
2 btn.onclick = function
()
刪除通過 dom0 級方法指定的事件處理程式，可將事件處理程式的屬性值設為 null。
1 btn.onclick = null;（3）dom2 級事件處理程式
dom2 級事件有兩個方法用於處理指定和刪除事件處理程式的操作： addeventlistener() 和 removeeventlistener()。
所有的 dom 節點都包含這兩個方法，並且都接收3個引數：要處理的事件名、作為事件處理程式的函式和乙個布林值。這個布林值引數如果是 true，表示在捕獲階段呼叫事件處理程式；如果是 false，表示在冒泡階段呼叫事件處理程式。
一般地，都是把事件處理程式新增都事件流的冒泡階段，可以極大限度地相容各種瀏覽器。最好只在需要在事件到達目標之前捕獲它的時候將事件處理程式新增到捕獲階段。除非特殊需要，不建議在事件捕獲階段註冊事件處理程式。
1使用 dom2 級方法新增事件處理程式的好處在於可以新增多個事件處理程式，並且兩個事件處理程式會按照新增他們的順序依次出發。例如：var btn = document.getelementbyid('btn');
2 btn.addeventlistener('click', function
() , false);5
//或者
6function
handle()
9 btn.addeventlistener('click', handle, false);
1 btn.addeventlistener('click', function
() , false
);4 btn.addeventlistener('click', function
() , false);7
//'hello world'8//
'btn'
通過 addeventlistener() 新增的事件處理程式只能通過 removeeventlistener() 移除，移除時傳入的引數與新增處理程式使用的引數相同，這意味著通過addeventlistener() 新增的匿名函式將無法移除。例如：
1 btn.removeeventlistener('click', function
() , false);4
//無效
正確的用法是
1（4）ie事件處理程式function
handler()
4 btn.addeventlistener('click', handler, false
);5 btn.removeeventlistener('click', handler, false);
在 ie 中提供了兩個方法 attachevent() 和 detachevent()用於新增事件處理程式，都接受兩個引數：事件處理程式名稱和事件處理程式函式。由於 ie8 及更早版本只支援事件冒泡，因此addtachevent 新增的事件處理程式都會被新增到冒泡階段。用法如下：
1在使用 attachevent() 的時候，事件處理程式是執行在全域性作用域下，因此 this 指向的是 window 物件。var btn = document.getelementbyid('btn');
2 btn.attachevent('onclick', function
() )
1 btn.attachevent('onclick', function
() )
attachevent() 也可以為乙個元素新增多個事件處理程式，只不過觸發的順序與新增的順序相反。
1 btn.attachevent('onclick', function
() )
4 btn.attachevent('onclick', function
() )7//
'hello world'8//
'btn'
detachevent 用於移除事件處理程式，需要的引數與 attachevent() 新增時的一樣，這也意味著新增的匿名函式不能被移除，正確用法如下：
function三、跨瀏覽器的事件處理程式handler()
4 btn.attachevent('onclick', handler);
5 btn.detachevent('onclick', handler);
1var eventutil =
6else
if(element.attachevent)
9else
12},
13 removehandler: function
(element, type, handler)
17else
if(element.detachevent)
20else23}
24}25//
使用方法
26var btn = document.getelementbyid('btn');
27function
handlerfn()
30eventutil.addhandler(btn, click, handlerfn);
31 eventutil.removehandler(btn, click, handlerfn);
JS 事件流與事件處理程式
1.事件流 從頁面中接收事件的順序 1.1 ie 事件冒泡流 1.2 netscape 事件捕獲 1.3 dom事件流 事件捕獲階段 事件目標階段 事件冒泡階段 dom2級事件規定 捕獲階段不會涉及目標事件。2.事件處理程式 事件 使用者或者瀏覽器自身執行的 某種動作 事件處理程式 響應某個事件的 ...
JS 事件流與事件處理程式
1.事件流 從頁面中接收事件的順序 1.1 ie 事件冒泡流 1.2 netscape 事件捕獲 1.3 dom事件流 事件捕獲階段 事件目標階段 事件冒泡階段 dom2級事件規定 捕獲階段不會涉及目標事件。2.事件處理程式 事件 使用者或者瀏覽器自身執行的 某種動作 事件處理程式 響應某個事件的 ...
JS事件 事件處理程式之IE事件處理程式
與訪問dom中的event物件不同，要訪問ie中的event物件有幾種不同的方式，取決於指定事件處理程式的方法。在使用dom0級方法新增事件處理程式時，event物件作為window物件乙個屬性存在。來看下面例子。var btn document.getelementbyid mybtn btn.o...