DOM事件模型與Internet explorer事件模型之綁定機制
不同瀏覽器chrome、Safari、Firefox、Opera、Internet Explorer）有自身專屬的事件機制，其中屬微軟的Internet Explorer最“另類”。
就拿事件Binder 方法來說吧！
為了保證有更好的跨瀏覽器特性，通常推薦採用與瀏覽器無關的事件Binder 方法。
綁定HTML元素屬性
這種事件綁定方式簡單易用，如：<form method="get" handler(this)">。
綁定事件處理器時需要直接修改HTML頁面代碼，會帶來如下幾個壞處：
直接修改HTML元素屬性，增加了頁面邏輯的複雜度。
開發人員需要直接修改HTML頁面，不利於團隊協作開發。
但是可以在調用javaScript函數時傳入參數，典型的就是傳入this、event等特殊意義的參數。
綁定DOM對象屬性
Document.forms[n].onsubmit=check;
綁定到DOM對象屬性時，該屬性值只是一個javaScript函數的引用，因此千萬不要在函數後面添加括弧——一旦添加括弧，那就變成了調用該函數，於是將該函數傳回值賦給DOM對象的onclick等屬性。
DOM模型的事件機制中，提供的事件綁定機制
objectTarget.addEventListener(“eventType”,handle,captureFlag)該方法為objectTarget綁定事件處理器handler，其第一個參數是事件類型字串將前面的事件屬性去掉首碼”on”,例如click、mousedown、keypress等）；第二個參數是事件處理函數；第三個參數用於指定監聽事件傳播的哪個階段true表示監聽捕獲階段，false表示監聽冒泡階段）。
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> DOM事件機制 </title></head><body><!-- 將測試的div元素 --><div id="test"> <!-- div元素的子項目：按鈕 --> <input id="testbn" type="button" value="單擊我" /></div><hr /><div id="results"> </div><script type="text/javascript"> // 事件處理函數 var gotClick1 = function(event) { // 該事件處理函數簡單輸出事件的當前對象 document.getElementById("results").innerHTML += "事件捕獲階段: " + event.currentTarget + "<br />"; } // 事件處理函數 function gotClick2(event) { // 該事件處理函數簡單輸出事件的當前對象 document.getElementById("results").innerHTML += "事件冒泡階段：" + event.currentTarget + "<br />"; } // 為testbn按鈕綁定事件處理函數捕獲階段） document.getElementById("testbn") .addEventListener("click" , gotClick1 , true); // 為testbn按鈕綁定事件處理函數冒泡階段） document.getElementById("testbn") .addEventListener("click" , gotClick2 , false); // 為按鈕所在的div對象綁定事件處理函數冒泡階段）。</script></body></html>
與addEventListener()方法相對應，DOM也提高了一個方法用於刪除事件處理器，該方法為removeEventListener
objectTarget.removeEventListener(“eventType”,handler,captureFlag)
該方法為objectTarget刪除事件處理器handler。
Internet explorer支援兩種自己專屬的事件Binder 方法。這兩種方法都不需要在HTML元素中增加額外的屬性。
在internet explorer 4.0以及更新的版本中，microsoft擴充了<script>元素，可以將它包含的腳步語句和某個元素的某個事件類型進行綁定。完成綁定的兩個屬性是for和event。
For屬性的值必須是HTML文檔中某個元素的id屬性值，該屬性唯一地標識了該HTML元素。Event屬性值是該元素所支援的事件名稱，如onmouseover、onclick等。一旦為該script標籤指定了這兩個屬性，就表明該標籤內的所有指令碼綁定了該元素的對應事件。
注意：在這種綁定機制下，事件處理的指令碼語句並不在函數中，而是在<script>元素內。
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 使用script for綁定事件處理器 </title></head><body><!-- 簡單的按鈕 --><input type="button" id="bn1" name="bn1" value="單擊我" /><!-- 使用script for將下面指令碼綁定到bn1按鈕的 --><script for="bn1" event=" type="text/javascript"> alert("您單擊了我");</script></body></html>
attachEvent方法進行綁定
DOMObject.attachEvent“eventName”,functionReference）
eventName的值是事件的名稱，例如onmousedown；functionReference的值是一個函數引用。
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 使用attachEvent綁定事件處理函數 </title></head><body><input type="button" id="bn1" name="bn1" value="單擊我" /><script type="text/javascript"> var test = function() { alert("單擊按鈕"); } //使用attachEvent執行事件綁定 document.getElementById("bn1").attachEvent(" , test);</script></body></html>
一般情況，一個DOM對象、一種事件最多隻能綁定一個事件處理器。但attachEvent()方法綁定事件處理器時，一個DOM對象，一種事件可以綁定多個事件處理器。
attachEvent()方法對應的是detachEvent()方法，該方法用於刪除一個事件處理器
DOMObject.detachEvent(“eventName”，functionReference);
本文出自 “singsong” 部落格，請務必保留此出處http://singsong.blog.51cto.com/2982804/1266803
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
