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

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

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

JavaScript事件綁定常用方法

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

它只能同時(shí)為一個(gè)對(duì)象的一個(gè)事件綁定一個(gè)響應(yīng)函數(shù)

不能綁定多個(gè)，如果有多個(gè)，后面的會(huì)覆蓋前面的

2、addEventListener()

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

參數(shù)：

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

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

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

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

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

3、attachEvent()

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

● 參數(shù):

事件字符串(帶on)

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

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

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

4、this問(wèn)題與解決

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

attachEvent()中的this是window

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

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

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

自建函數(shù)bind()

自己定義一個(gè)函數(shù)用來(lái)給一個(gè)對(duì)象綁定事件

● 思路

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

● 兼容性：

通過(guò)if判斷對(duì)象是否存在addEventListener方法來(lái)區(qū)分瀏覽器

● this問(wèn)題的解決

由于傳入的回調(diào)函數(shù)是瀏覽器調(diào)用的，我們無(wú)法去操作，所以我們?cè)赼ttachEvent()不直接傳入回調(diào)函數(shù)，而是先定義一個(gè)匿名函數(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);
                });
                
            };
            //定義一個(gè)函數(shù)bind()，用來(lái)為指定元素綁定事件響應(yīng)函數(shù)
                /*
                 * 參數(shù)：
                 *  obj 要綁定事件的對(duì)象
                 *  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()與兼容性問(wèn)題的常用方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來(lái)創(chuàng)新互聯(lián)行業(yè)資訊！

分享題目：解決JS事件中自建函數(shù)bind()與兼容性問(wèn)題的常用方法
標(biāo)題URL：http://www.chinadenli.net/article2/goccic.html

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

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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