Javascript的事件綁定主要有四種方法（一下在IE中運行正常，但不保證其他瀏覽器）：
[註：onXXX為某一事件，fun為某一function，domId為某一DOM對象id，event類型見後邊附錄。]
1、在DOM中，直接用onXXX="fun();"進行綁定
2、在Javascript代碼中用 DOM對象.onXXX=fun 進行綁定
3、用 DOM對象.attachEvent("onXXX",fun) 進行綁定
4、用<script for="domId" event="onXXX">fun();</script> 進行綁定
[javascript]
<html>
<head>
<title>event test</title>
</head>
<body onload="init()">
<!– 綁定方式一:在元素中，通過onXXX（事件）設置綁定方法 –>
<button id="btn1" onclick="display()" >綁定方式一</button>
<!– 綁定方式二：在Javascript代碼中，通過獲得元素，為元素的onXXX（事件）設置綁定方法 –>
<button id="btn2">綁定方式二</button>
<!– 綁定方式三：通過for、event為元素綁定事件（IE4+）。for後面是元素id，event是具體事件 –>
<button id="btn3">綁定方式三</button>
<!– 綁定方式四：通過attachEvent為元素綁定事件（IE5+）。第一個參數是事件名，第二個參數是綁定的方法 –>
<button id="btn4">綁定方式四</button>
</body>
</html>
<script type="text/javascript">
function init() {
document.getElementById("btn2").onclick = display;//為button2綁定事件
document.getElementById("btn4").attachEvent("onclick", display);//為button4綁定事件
}
function display(event) {
var targ;//觸發事件的對象引用
if (!event) {
var event = window.event;//獲得當前事件(IE)
}
if (event.target) {//IE沒有target
targ = evente.target;
} else if (event.srcElement) {//適用於IE
targ = event.srcElement;
}
//對觸發事件的對象進行操作
alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
targ.disabled="disabled" ;
}
<script>
<script for="btn3" event="onclick">
display();//為button3綁定事件
<script>
[javascript] view plaincopy
<html>
<head>
<title>event test</title>
</head>
<body onload="init()">
<!– 綁定方式一:在元素中，通過onXXX（事件）設置綁定方法 –>
<button id="btn1" onclick="display()" >綁定方式一</button>
<!– 綁定方式二：在Javascript代碼中，通過獲得元素，為元素的onXXX（事件）設置綁定方法 –>
<button id="btn2">綁定方式二</button>
<!– 綁定方式三：通過for、event為元素綁定事件（IE4+）。for後面是元素id，event是具體事件 –>
<button id="btn3">綁定方式三</button>
<!– 綁定方式四：通過attachEvent為元素綁定事件（IE5+）。第一個參數是事件名，第二個參數是綁定的方法 –>
<button id="btn4">綁定方式四</button>
</body>
</html>
<script type="text/javascript">
function init() {
document.getElementById("btn2").onclick = display;//為button2綁定事件
document.getElementById("btn4").attachEvent("onclick", display);//為button4綁定事件
}
function display(event) {
var targ;//觸發事件的對象引用
if (!event) {
var event = window.event;//獲得當前事件(IE)
}
if (event.target) {//IE沒有target
targ = evente.target;
} else if (event.srcElement) {//適用於IE
targ = event.srcElement;
}
//對觸發事件的對象進行操作
alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
targ.disabled="disabled" ;
}
<script>
<script for="btn3" event="onclick">
display();//為button3綁定事件
<script>
附一：event事件：
onabort： 圖像的加載被中斷
onblur： 元素失去焦點
onchange： 域的內容被改變
onclick： 當用戶點擊某個對象時調用的事件句柄
ondblclick： 當用戶雙擊某個對象時調用的事件句柄
onerror： 在加載文檔或圖像時發生錯誤
onfocus： 元素獲得焦點
onkeydown： 某個鍵盤按鍵被按下
onkeypress： 某個鍵盤按鍵被按下並松開
onkeyup： 某個鍵盤按鍵被松開
onload： 一張頁面或一幅圖像完成加載
onmousedown： 鼠標按鈕被按下
onmousemove： 鼠標被移動
onmouseout： 鼠標從某元素移開
onmouseover： 鼠標移到某元素之上
onmouseup： 鼠標按鍵被松開
onreset： 重置按鈕被點擊
onresize： 窗口或框架被重新調整大小
onselect： 文本被選中
onsubmit： 確認按鈕被點擊
onunload： 用戶退出頁面
附二：IE event屬性：
cancelBubble： 如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。
fromElement ：對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode ：對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup 事件，它指定瞭被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的佈局相關。
offsetX,offsetY ：發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。
returnValue： 如果設置瞭該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 fasle，可以取消發生事件的源元素的默認動作。
srcElement ：對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement： 對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y： 事件發生的位置的 x 坐標和 y 坐標，它們相對於用CSS動態定位的最內層包容元素。
作者：cqkxzyi
