溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章和大家了解一下解決JS事件中自建函數bind()與兼容性問題的常用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
JavaScript事件綁定常用方法
1、對象.事件 = 函數;
它只能同時為一個對象的一個事件綁定一個響應函數
不能綁定多個，如果有多個，后面的會覆蓋前面的
2、addEventListener()
此方法也可以為元素綁定響應函數
參數：
● 事件的字符串(不帶on)
● 回調函數，事件觸發時執行
● 是否在捕獲階段觸發事件，一般都傳false
使用此方法可以為一個元素的同一事件綁定多個響應函數
當事件觸發時，按綁定順序依次執行
3、attachEvent()
IE8及以下瀏覽器不支持addEventListener()方法，但可以使用attachEvent()方法起到同樣的效果
● 參數:
事件字符串(帶on)
● 回調函數
此方法也可以綁定多個函數，不過函數執行順序與addEventListener()相反
4、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>以上就是解決JS事件中自建函數bind()與兼容性問題的常用方法的詳細內容了，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎來億速云行業資訊！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
