溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

DOM事件模型與Internet explorer事件模型之綁定機(jī)制

發(fā)布時(shí)間：2020-07-04 17:58:42 來源：網(wǎng)絡(luò) 閱讀：1254 作者：as491273636 欄目：web開發(fā)

DOM事件模型與Internet explorer事件模型之綁定機(jī)制

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

   就拿事件綁定方法來說吧！

    為了保證有更好的跨瀏覽器特性，通常推薦采用與瀏覽器無關(guān)的事件綁定方法。

綁定HTML元素屬性

這種事件綁定方式簡單易用，如：<form method="get"  handler(this)">。

綁定事件處理器時(shí)需要直接修改HTML頁面代碼，會(huì)帶來如下幾個(gè)壞處：

直接修改HTML元素屬性，增加了頁面邏輯的復(fù)雜度。

開發(fā)人員需要直接修改HTML頁面，不利于團(tuán)隊(duì)協(xié)作開發(fā)。

但是可以在調(diào)用javaScript函數(shù)時(shí)傳入?yún)?shù)，典型的就是傳入this、event等特殊意義的參數(shù)。

綁定DOM對(duì)象屬性

Document.forms[n].onsubmit=check;

綁定到DOM對(duì)象屬性時(shí)，該屬性值只是一個(gè)javaScript函數(shù)的引用，因此千萬不要在函數(shù)后面添加括號(hào)——一旦添加括號(hào)，那就變成了調(diào)用該函數(shù)，于是將該函數(shù)返回值賦給DOM對(duì)象的onclick等屬性。

DOM模型的事件機(jī)制中，提供的事件綁定機(jī)制

objectTarget.addEventListener(“eventType”,handle,captureFlag)該方法為objectTarget綁定事件處理器handler，其第一個(gè)參數(shù)是事件類型字符串（將前面的事件屬性去掉前綴”on”,例如click、mousedown、keypress等）；第二個(gè)參數(shù)是事件處理函數(shù)；第三個(gè)參數(shù)用于指定監(jiān)聽事件傳播的哪個(gè)階段（true表示監(jiān)聽捕獲階段，false表示監(jiān)聽冒泡階段）。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> DOM事件機(jī)制 </title>
</head>
<body>
<!-- 將測試的div元素 -->
<div id="test">
    <!-- div元素的子元素：按鈕 -->
    <input id="testbn" type="button" value="單擊我" />
</div>
<hr />
<div id="results"> </div>
<script type="text/javascript">
    // 事件處理函數(shù)
    var gotClick1 = function(event)
    {
        // 該事件處理函數(shù)簡單輸出事件的當(dāng)前對(duì)象
        document.getElementById("results").innerHTML +=
            "事件捕獲階段: " + event.currentTarget + "<br />";
    }
    // 事件處理函數(shù)
    function gotClick2(event)
    {
        // 該事件處理函數(shù)簡單輸出事件的當(dāng)前對(duì)象
        document.getElementById("results").innerHTML +=
            "事件冒泡階段：" + event.currentTarget + "<br />";
    }
    // 為testbn按鈕綁定事件處理函數(shù)（捕獲階段）
    document.getElementById("testbn")
        .addEventListener("click" , gotClick1 , true);
    // 為testbn按鈕綁定事件處理函數(shù)（冒泡階段）
    document.getElementById("testbn")
        .addEventListener("click" , gotClick2 , false);
    // 為按鈕所在的div對(duì)象綁定事件處理函數(shù)（冒泡階段）。
</script>
</body>
</html>

與addEventListener()方法相對(duì)應(yīng)，DOM也提高了一個(gè)方法用于刪除事件處理器，該方法為removeEventListener

objectTarget.removeEventListener(“eventType”,handler,captureFlag)

該方法為objectTarget刪除事件處理器handler。


Internet explorer支持兩種自己獨(dú)有的事件綁定方法。這兩種方法都不需要在HTML元素中增加額外的屬性。

在internet explorer 4.0以及更新的版本中，microsoft擴(kuò)展了<script>元素，可以將它包含的腳步語句和某個(gè)元素的某個(gè)事件類型進(jìn)行綁定。完成綁定的兩個(gè)屬性是for和event。

For屬性的值必須是HTML文檔中某個(gè)元素的id屬性值，該屬性唯一地標(biāo)識(shí)了該HTML元素。Event屬性值是該元素所支持的事件名稱，如onmouseover、onclick等。一旦為該script標(biāo)簽指定了這兩個(gè)屬性，就表明該標(biāo)簽內(nèi)的所有腳本綁定了該元素的對(duì)應(yīng)事件。

注意：在這種綁定機(jī)制下，事件處理的腳本語句并不在函數(shù)中，而是在<script>元素內(nèi)。

<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方法進(jìn)行綁定

DOMObject.attachEvent（“eventName”,functionReference）

eventName的值是事件的名稱，例如onmousedown；functionReference的值是一個(gè)函數(shù)引用。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 使用attachEvent綁定事件處理函數(shù) </title>
</head>
<body>
<input type="button" id="bn1" name="bn1" value="單擊我" />
<script type="text/javascript">
    var test = function()
    {
        alert("單擊按鈕");
    }
    //使用attachEvent執(zhí)行事件綁定
    document.getElementById("bn1").attachEvent(" , test);
</script>
</body>
</html>

一般情況，一個(gè)DOM對(duì)象、一種事件最多只能綁定一個(gè)事件處理器。但attachEvent()方法綁定事件處理器時(shí)，一個(gè)DOM對(duì)象，一種事件可以綁定多個(gè)事件處理器。

attachEvent()方法對(duì)應(yīng)的是detachEvent()方法，該方法用于刪除一個(gè)事件處理器

DOMObject.detachEvent(“eventName”，functionReference);


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手