javaScript之事件處理常式

標籤：事件處理   冒泡   事件   handler   導致   範圍鏈   地方   catch   ntb   

        事件就是使用者或瀏覽器自身執行的某個動作，JavaScript與HTML的互動也是通過事件實現的。而相應某個事件的函數就叫做事件處理函數。包括以下幾種：

1.HTML事件處理常式       

       某個元素支援的每種事件，都可以使用一個相應的事件處理常式相同的HTML特性指定。這個特性的值能執行JavaScript代碼。

<input type=”button” value=”按鈕” onclick=”showMessage()”><script>  function showMessage(){    alert(“Hello”)}</script>

       封裝元素屬性值的函數有一個局部變數event，也就是事件對象，通過event可以直接存取事件對象。函數內部的this值等於事件的目標元素。該函數可以使用with擴充範圍

function(){       with(document){       //可訪問document             with(this){             //可訪問該元素本身的屬性值             }      }}

缺點：

（1）存在時差，使用者可能在HTML元素剛顯示就觸發事件，但是當前並不一定具備執行條件，比如JS代碼沒有下載完成。可以使用try-catch拋出錯誤。

（2）擴充事件處理常式的範圍鏈在不同瀏覽器中會導致不同結果。

（3）ＨＴＭＬ代碼與JavaScript代碼高度耦合。如果需要更換事件處理常式，需要改動兩個地方。

２.ＤＯＭ０級事件處理常式    

　　　與ＨＴＭＬ事件處理常式相同的是都在元素屬性上添加事件處理常式。不同的地方是ＤＯＭ０級在JavaScript代碼中擷取元素引用，在引用屬性上添加事件處理常式。

<input type=”button” value=”按鈕”　ｉｄ＝＂ｂｔｎ＂><script>  var Btn = document.getElementById(“btn”);Btn.onclick =　function(){   alert(“Hello”)};</script>

 　程式中的this引用當前元素的範圍。

　　刪除DOM0級事件

Btn.onclick = null;

３．DOM2級事件處理常式

　　　“DOM2級事件”定義了兩個方法，用於指定和刪除事件處理常式：addEventListener()和removeEventListener()。它們都接受3個參數：事件名，事件處理常式函數和一個布爾值。最後一個布爾值是true表示在捕獲階段呼叫事件處理常式，false表示在冒泡階段呼叫事件處理常式。第三個參數可選，預設值是false。與DOM0級相同，程式中的this引用當前元素的範圍。

<input type=”button” value=”按鈕”　id＝”btn”><script>  var Btn = document.getElementById(“btn”);Btn.addEventListener(“click”,function(){alert(“Hello”)},false};</script>

可添加多個事件處理常式，不會被覆蓋，從上向下執行。

通過removeEventListener()移除事件處理常式，對於添加的匿名函數無法移除。

４．IE事件處理常式

 　　“IE事件”處理常式用於指定和刪除事件處理常式的方法有：attachEvent ()和detachEvent ()。這兩個方法接受兩個參數：事件處理常式名和事件處理常式函數名。通過attachEvent ()添加的事件預設都會添加到冒泡階段。

<input type=”button” value=”按鈕”　id＝”btn”><script>  var Btn = document.getElementById(“btn”);Btn.attachEvent(“onclick”,function(){alert(“Hello”)} };</script>

　　與DOM0級不同的是，事件處理常式會在全域範圍中運行，即this指向window。

 　　 attachEvent ()也可以添加多個事件處理常式，但是執行順序是自下而上。

 ５.跨瀏覽器的事件處理常式

　　核心視情況的分別處理ＤＯＭ０級，ＤＯＭ２級和ＩＥ事件處理常式。

Var ｅventHandler ={　　addHandler: function(element, type, handler){　　if(element.addEventListener){　　　　element.addEventListener(type, handler, false);　　}else if(element.attachEvent){　　　　element. attachEvent (“on”+type, handler);　　}else{    　element[“on”+type] = handler;　　},　　removeHandler: function(element, type, handler){　　if(element.removeEventListener){　　　　element. removeEventListener(type, handler, false);　　}else if(element.detach Event){　　　　element. detach Event (“on”+type, handler);　　}else{   　　 element[“on”+type] = null;　　}　}};

　　eventHandler接受3個參數，分別是要操作元素的引用、事件名和事件處理函數。

調用方法

var Btn = document.getElementById(“btn”);var handler = function(){  　 alert(“Hello”)};eventHandler. addHandler (Btn, “click”, handler);removeHandler. addHandler (Btn, “click”, handler);

 

javaScript之事件處理常式