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

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

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了迎江免費建站歡迎大家使用！

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

JavaScript事件綁定常用方法

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

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

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

2、addEventListener()

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

參數(shù)：

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

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

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

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

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

3、attachEvent()

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

● 參數(shù):

事件字符串(帶on)

● 回調函數(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ù)：對象，事件，回調函數(shù)

● 兼容性：

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

● this問題的解決

由于傳入的回調函數(shù)是瀏覽器調用的，我們無法去操作，所以我們在attachEvent()不直接傳入回調函數(shù)，而是先定義一個匿名函數(shù)，然后在函數(shù)內部調用回調函數(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 回調函數(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 不直接調用func而是在匿名函數(shù)內調用
                    obj.attachEvent("on"+eventStr, function(){
                        //在匿名函數(shù)內調用回調函數(shù) 利用call()方法將this改為obj
                        func.call(obj);
                    });
                }
            };  
        </script>
    </head>
    <body>
        <button id="btn1">btn1</button>
    </body>
</html>

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

分享題目：解決JS事件中自建函數(shù)bind()與兼容性問題的常用方法
標題URL：http://bm7419.com/article2/goccic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站維護、搜索引擎優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務器托管