DOM事件模型與Internet explorer事件模型之繫結機制

   不同瀏覽器（chrome、Safari、Firefox、Opera、Internet Explorer）有自身獨有的事件機制，其中屬微軟的Internet Explorer最“另類”。

   就拿事件繫結方法來說吧！

    為了保證有更好的跨瀏覽器特性，通常推薦採用與瀏覽器無關的事件繫結方法。

繫結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支援兩種自己獨有的事件繫結方法。這兩種方法都不需要在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);