溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

解決JS事件中自建函數(shù)bind()與兼容性問題的常用方法

發(fā)布時間：2020-04-16 10:09:32 來源：億速云 閱讀：213 作者：小新 欄目：web開發(fā)

本篇文章和大家了解一下解決JS事件中自建函數(shù)bind()與兼容性問題的常用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

解決JS事件中自建函數(shù)bind()與兼容性問題的常用方法

JavaScript事件綁定常用方法

1、對象.事件 = 函數(shù);

它只能同時為一個對象的一個事件綁定一個響應函數(shù)

不能綁定多個，如果有多個，后面的會覆蓋前面的

2、addEventListener()

此方法也可以為元素綁定響應函數(shù)

參數(shù)：

● 事件的字符串(不帶on)

● 回調(diào)函數(shù)，事件觸發(fā)時執(zhí)行

● 是否在捕獲階段觸發(fā)事件，一般都傳false

使用此方法可以為一個元素的同一事件綁定多個響應函數(shù)

當事件觸發(fā)時，按綁定順序依次執(zhí)行

3、attachEvent()

IE8及以下瀏覽器不支持addEventListener()方法，但可以使用attachEvent()方法起到同樣的效果

● 參數(shù):

事件字符串(帶on)

● 回調(diào)函數(shù)

此方法也可以綁定多個函數(shù)，不過函數(shù)執(zhí)行順序與addEventListener()相反

解決JS事件中自建函數(shù)bind()與兼容性問題的常用方法

4、this問題與解決

addEventListener()中的this是綁定事件的對象

attachEvent()中的this是window

如果要解決兼容性問題則需要統(tǒng)一兩個方法的this

這里我們用到了call()方法

call()可以用來改變函數(shù)的this

自建函數(shù)bind()

自己定義一個函數(shù)用來給一個對象綁定事件

● 思路

三個參數(shù)：對象，事件，回調(diào)函數(shù)

● 兼容性：

通過if判斷對象是否存在addEventListener方法來區(qū)分瀏覽器

● this問題的解決

由于傳入的回調(diào)函數(shù)是瀏覽器調(diào)用的，我們無法去操作，所以我們在attachEvent()不直接傳入回調(diào)函數(shù)，而是先定義一個匿名函數(shù)，然后在函數(shù)內(nèi)部調(diào)用回調(diào)函數(shù)，并利用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);
                });
                
            };
            //定義一個函數(shù)bind()，用來為指定元素綁定事件響應函數(shù)
                /*
                 * 參數(shù)：
                 *  obj 要綁定事件的對象
                 *  eventStr 事件的字符串
                 *  func 回調(diào)函數(shù)
                 */
            function bind(obj, eventStr, func){
                //判斷是否有addEventListener()方法
                if(obj.addEventListener){
                    //大部分瀏覽器兼容的方式
                    obj.addEventListener(eventStr, func, false);
                }
                else{
                    //IE8及以下    注意 on
                    //obj.attachEvent("on"+eventStr, func);//此方法this為window下面提供解決方法
                    
                    //統(tǒng)一this 不直接調(diào)用func而是在匿名函數(shù)內(nèi)調(diào)用
                    obj.attachEvent("on"+eventStr, function(){
                        //在匿名函數(shù)內(nèi)調(diào)用回調(diào)函數(shù) 利用call()方法將this改為obj
                        func.call(obj);
                    });
                }
            };  
        </script>
    </head>
    <body>
        <button id="btn1">btn1</button>
    </body>
</html>

以上就是解決JS事件中自建函數(shù)bind()與兼容性問題的常用方法的詳細內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來億速云行業(yè)資訊！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手