91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

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

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

發布時間:2020-04-16 10:09:32 來源:億速云 閱讀:216 作者:小新 欄目:web開發

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

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

JavaScript事件綁定常用方法

1、對象.事件 = 函數;

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

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

2、addEventListener()

此方法也可以為元素綁定響應函數

參數:

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

● 回調函數,事件觸發時執行

● 是否在捕獲階段觸發事件,一般都傳false

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

當事件觸發時,按綁定順序依次執行

3、attachEvent()

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

● 參數:

事件字符串(帶on)

● 回調函數

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

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

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()與兼容性問題的常用方法的詳細內容了,看完之后是否有所收獲呢?如果想了解更多相關內容,歡迎來億速云行業資訊!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

勐海县| 颍上县| 昂仁县| 祁连县| 北碚区| 红安县| 石城县| 利津县| 马公市| 昌乐县| 宿迁市| 改则县| 杨浦区| 台前县| 阿鲁科尔沁旗| 石嘴山市| 肇州县| 英山县| 田东县| 洪江市| 周口市| 德庆县| 都江堰市| 新和县| 潼关县| 平山县| 宁晋县| 张掖市| 贵阳市| 泗洪县| 宿迁市| 玛纳斯县| 班戈县| 桃江县| 密云县| 安乡县| 平阳县| 西充县| 石楼县| 将乐县| 墨竹工卡县|