JavaScript事件綁定常用方法 對象.事件 = 函數; 它只能同時為一個對象的一個事件綁定一個響應函數 不能綁定多個，如果有多個，後面的會覆蓋前面的 addEventListener() 此方法也可以為元素綁定響應函數 參數： 1. 事件的字元串(不帶on) 2. 回調函數，事件觸發時執行 3 ...
JavaScript事件綁定常用方法
對象.事件 = 函數;
它只能同時為一個對象的一個事件綁定一個響應函數
不能綁定多個，如果有多個，後面的會覆蓋前面的addEventListener()
此方法也可以為元素綁定響應函數
參數：
- 事件的字元串(不帶on)
- 回調函數，事件觸發時執行
- 是否在捕獲階段觸發事件，一般都傳false
使用此方法可以為一個元素的同一事件綁定多個響應函數
當事件觸發時，按綁定順序依次執行
attachEvent()
IE8及以下瀏覽器不支持addEventListener()方法，但可以使用attachEvent()方法起到同樣的效果
參數:
- 事件字元串(帶on)
- 回調函數
此方法也可以綁定多個函數，不過函數執行順序與addEventListener()相反
this問題與解決
addEventListener()中的this是綁定事件的對象
attachEvent()中的this是window
如果要解決相容性問題則需要統一兩個方法的this這裡我們用到了call()方法
call()可以用來改變函數的this
自建函數bind()
自己定義一個函數用來給一個對象綁定事件
思路
三個參數：對象，事件，回調函數
相容性：
通過if判斷對象是否存在addEventListener方法來區分瀏覽器
this問題的解決
由於傳入的回調函數是瀏覽器調用的，我們無法去操作，所以我們在attachEvent()不直接傳入回調函數，而是先定義一個匿名函數，然後在函數內部調用回調函數，並利用call方法改變this
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
bind(btn1, "click",function(){
alert(this);
});
};
//定義一個函數bind()，用來為指定元素綁定事件響應函數
/*
* 參數：
* obj 要綁定事件的對象
* eventStr 事件的字元串
* func 回調函數
*/
function bind(obj, eventStr, func){
//判斷是否有addEventListener()方法
if(obj.addEventListener){
//大部分瀏覽器相容的方式
obj.addEventListener(eventStr, func, false);
}
else{
//IE8及以下 註意 on
//obj.attachEvent("on"+eventStr, func);//此方法this為window下麵提供解決方法
//統一this 不直接調用func而是在匿名函數內調用
obj.attachEvent("on"+eventStr, function(){
//在匿名函數內調用回調函數 利用call()方法將this改為obj
func.call(obj);
});
}
};
</script>
</head>
<body>
<button id="btn1">btn1</button>
</body>
</html>
