communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Explication détaillée des compétences d'événement multi-navigateurs javascript handler_javascript

Explication détaillée des compétences d'événement multi-navigateurs javascript handler_javascript

WBOY
Libérer： 2016-05-16 15:08:02
original
1276 Les gens l'ont consulté

Cet article partage le mécanisme de traitement des événements entre navigateurs JavaScript pour votre référence. Le contenu spécifique est le suivant

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>跨浏览器的事件处理程序</title>
</head>
<body>
  <input type="button" value="click me" id="myBtn"/>
  <input type="button" value="解除" id="unlisten"/>
 
  <script>
 
    function $(id){
      return document.getElementById(id);
    }
 
    var EventUtil={
      fnCount:0
      ,fnData:{}
      ,addHandler:function(element,type,handler){
        this.fnCount++;
        handler.fid = this.fnCount;
        var _fn = handler;
        handler = function(){
          _fn.call(element);
        };
        this.fnData[this.fnCount] = handler;
 
        if(element.addEventListener){
          element.addEventListener(type,handler,false);
        }  else if(element.attachEvent){
          element.attachEvent("on"+type,handler);
        }  else {
          element["on"+type]=handler;
        }
      }
      ,removeHandler:function(element,type,handler){
        handler = this.fnData[handler.fid];
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
      }
    }
 
    var btn=$("myBtn");
    var unbtn = $('unlisten');
    var bindFn1=function(){
      alert(this.id);
    };
    var bindFn2=function(){
      alert('2');
    };
 
    EventUtil.addHandler(btn,"click",bindFn1);
    EventUtil.addHandler(btn,"click",bindFn2);
    //EventUtil.removeHandler(btn,"click",bindFn1);
    EventUtil.addHandler(unbtn,"click",function(){
      EventUtil.removeHandler(btn,"click",bindFn1);
    });
 
 
  </script>
</body>
</html>
Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：
javascript跨浏览器事件处理 javascript事件处理机制 javascript跨浏览器事件
source：php.cn
Article précédent：Résumé de quelques techniques couramment utilisées dans jQuery_jquery Article suivant：Exemples d'applications de glisser-déposer JavaScript (2)_compétences Javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Lancez un navigateur transparent pour améliorer l'expérience des applications Web et des PWA [prend en charge HTML, CSS et JavaScript statiques] [permet aux utilisateurs d'afficher les fonds d'écran de nos applications Web/PWA] Je suis un développeur et concepteur front-end junior développant actuellement une applica...
Depuis 2024-04-05 13:50:12
0
1
1367
next ne fonctionne pas correctement dans le middleware utilisant Nodejs Je travaille avec Nodejs et j'utilise expressjs et maintenant je travaille sur la fonction...
Depuis 2024-04-04 17:33:56
0
1
340
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal