溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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);
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
