JSイベントの自己構築関数bind()と互換性問題の解決策-jsチュートリアル-php.cn

JSイベントの自己構築関数bind()と互換性問題の解決策

angryTom

リリース： 2019-12-30 17:51:18

転載

2396 人が閲覧しました

#JavaScript イベントバインディングの一般的なメソッド

1. Object.Event = Function;

オブジェクトのイベントに同時にバインドできる応答関数は 1 つだけです。

複数バインドできません。複数ある場合、後者が前の関数を上書きします

2. addEventListener()

このメソッドは、応答関数を要素にバインドすることもできます

パラメータ:

● の文字列イベント (on なし)

#イベントがトリガーされたときに実行されるコールバック関数

##キャプチャフェーズ中にイベントをトリガーするかどうか。通常は false を渡します

#これを使用します要素の値を設定するメソッドです。複数の応答関数を同じイベントにバインドします。

#イベントがトリガーされたら、

3、attachEvent()

# を実行します。 ##IE8 および次のブラウザは addEventListener() メソッドをサポートしていませんが、attachEvent() メソッドを使用して同じ効果を実現できます。

##● パラメータ:イベント文字列 (on 付き) )

● コールバック関数

このメソッドは複数の関数をバインドすることもできますが、関数の実行順序は addEventListener()

4 とは逆になります。

addEventListener() のこれはバインドされたイベントのオブジェクトです

attachEvent() のこれは window 互換性の問題を解決したい場合は、次のようにします。 2 つのメソッドの this を統合する必要があります

ここでは call() メソッドを使用します

call() は関数の this を変更するために使用できます

#自作関数bind()

イベントをオブジェクトにバインドする関数を定義

##● アイデア

#3つのパラメータ: オブジェクト、イベント、コールバック関数#●● 互換性:

if を使用して、ブラウザを区別するための addEventListener メソッドがオブジェクトにあるかどうかを判断します。

#● この問題の解決策

コールバック関数はブラウザから呼び出されるので操作することができないため、attachEvent()でコールバック関数を直接渡すのではなく、無名関数を定義し、その関数内でコールバック関数を呼び出し、callメソッドを使用して呼び出しを行います。これを変更してください

サンプルコード

<!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 チュートリアル

列からのものです。ぜひ学習してください。

以上がJSイベントの自己構築関数bind()と互換性問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。