javascript 事件綁定

1、最簡單和向後兼容性最好的事件綁定方法是把事件綁定到元素標識的屬性。事件屬性名稱由事件類型外加一個「on」前綴構成。這些屬性也被稱爲 事件處理器

<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">

或者

<INPUT TYPE="text" NAME="first_name" onChange="javascript : js code">

或者

Dom.onclick = function(e){  //todo  }

2、js方法綁定事件

一、dom對象的 attachEvent()方法給該dom元素的事件（該方法僅支持冒泡事件——IE綁定事件的方式）

elemObj.attachEvent(事件, func);這個方法有一個值得注意的地方：您不能在元素被載入瀏覽器以前執行這個語句。該對象的引用在相應的HTML按鍵元素被瀏覽器建立以前，都是無效的。所以，要讓這樣的綁定語句或者在頁面的底部運行，或者在BODY元素的onLoad事件處理器調用的函數中運行。

二、dom對象的 addEventListener()方法給該dom對象的事件（支持捕捉事件和冒泡事件——w3c綁定事件的方式）

elemObj.addEventListener(on事件, func, captureFlag);這個方法的第一個參數是一個聲明事件類型的字符串（不帶"on"前綴），好比click，mousedown，和keypress。第二個參數是綁定的函數。第三個參數則是一個Boolean值，用來設置事件是在事件捕獲時執行，仍是事件冒泡時執行。IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等於false的時候執行，因此把在處理事件時把useCapture設置爲false是比較安全，也實現兼容瀏覽器的效果。

三、捕捉型事件和冒泡型事件：

事件冒泡：事件從當前元素對象觸發，而後向上層元素搜索相同對象事件並觸發（直搜到document節點）。IE事件默認都只這種類型的事件。

事件捕獲：從document節點開始搜索事件，而後向下層搜索相同對象事件並觸發，直到當前元素節點。

四、

中止事件冒泡: 

IE: window.event.cancelBubble=false; 

Other: e.stopPropagation(); 

3、事件解除綁定

IE: detachEvent 

Other: removeEventListener 

 4、經常使用舉例

var button = document.getElementById("buttonId");  
if(button.addEventListener){  
    button.addEventListener("click",eventFunction,false);  
}else if(button.attachEvent){  
    button.attachEvent("onclick",eventFunction);  
} 

 

 

 

5、window.event

一、event表明事件的狀態，例如觸發event對象的元素、鼠標的位置及狀態、按下的鍵等等。event對象只在事件發生的過程當中纔有效。event的某些屬性只對特定的事件有意義。

二、屬性：

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

 

三、經常使用屬性詳細說明：

altKey：檢查alt鍵的狀態

shiftKey：檢查shift鍵的狀態

ctrlKey：檢查ctrl鍵的狀態

keyCode：檢測鍵盤事件相對應的內碼

srcElement： 返回觸發事件的元素

button：檢查按下的鼠標鍵，僅用於onmousedown，onmouseup和onmousemove事件。對其餘事件，無論鼠標狀態如何，都返回0（好比onclick）

type：返回事件名

 

四、兼容性

//IE：有window.event對象
//FF：沒有window.event對象。能夠經過給函數的參數傳遞event對象。如onmousemove=doMouseMove(event)
<script>
  function test(event) {
  var event = event || window.event;
  //do Something
  }
</script>
<input type="button" value="click" onclick="test(event)"/>