Fonction auto-construite d'événement JS bind() et solution aux problèmes de compatibilité-js tutoriel-php.cn

Fonction auto-construite d'événement JS bind() et solution aux problèmes de compatibilité

angryTom

Libérer： 2019-12-30 17:51:18

avant

2434 Les gens l'ont consulté

Méthodes courantes pour la liaison d'événements JavaScript

1. Object.Event = function;

Il ne peut lier qu'une seule fonction de réponse à un événement d'un objet en même temps

ne peut pas en lier plusieurs. S'il y en a plusieurs, ces dernières écraseront la précédente. ones

2. addEventListener()

Cette méthode peut également lier la fonction de réponse à l'élément

Paramètres :

Quantity La chaîne de l'événement ( Sans on)

● Fonction de rappel, exécutée lorsque l'événement est déclenché

● S'il faut déclencher l'événement pendant la phase de capture, passe généralement faux

Utilisez cette méthode pour définir la valeur d'un élément Lier plusieurs fonctions de réponse au même événement

Lorsque l'événement est déclenché, exécutez-les dans l'ordre dans l'ordre de liaison

3 , attachEvent()

IE8 et Les navigateurs suivants ne prennent pas en charge la méthode addEventListener(), mais vous pouvez utiliser la méthode attachEvent() pour obtenir le même effet

● Paramètres :

Chaîne d'événement (avec on)

● Fonction de rappel

Cette méthode peut également lier plusieurs fonctions, mais l'ordre d'exécution de la fonction est opposé à addEventListener()

4. Ce problème et cette solution

Ceci dans addEventListener() est l'objet de l'événement lié

Ceci dans attachEvent() est window

Si vous souhaitez résoudre le problème de compatibilité, vous devez unifier le this des deux méthodes

Ici, nous utilisons la méthode call()

call() peut être utilisé pour modifier le this de la fonction

Fonction auto-construite bind()

Définir une fonction pour lier un événement à un objet

● Idée

Trois paramètres : objet, événement, fonction de rappel

● Compatibilité :

Utilisez if pour déterminer si l'objet possède une méthode addEventListener pour distinguer les navigateurs

● Solution à ce problème

Étant donné que la fonction de rappel entrant est appelée par le navigateur, nous ne pouvons pas l'utiliser. Nous ne transmettons donc pas directement la fonction de rappel dans attachEvent(), mais définissons d'abord une fonction anonyme, puis appelons le rappel. fonction à l'intérieur de la fonction, et utilisez la méthode d'appel pour changer ceci

Exemple de code

<!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>

Copier après la connexion

Cet article provient de la colonne tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!