Explication détaillée de la façon d'ajouter et de supprimer des écouteurs à l'aide des compétences Javascript

Explication détaillée de la façon d'ajouter et de supprimer des écouteurs à l'aide des compétences Javascript_javascript

WBOY

Libérer： 2016-05-16 16:25:40

original

1741 Les gens l'ont consulté

L'exemple de cet article décrit l'utilisation de Javascript pour ajouter et supprimer des écouteurs. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

La surveillance des événements en js consiste à utiliser addEventListener pour lier un événement. Cette utilisation est très courante et simple en jquery, mais elle est plus compliquée en js natif. Voici les tests et exemples de chaque méthode de l'événement addEventListener pour votre. référence.

Lorsque je travaillais sur le lecteur il y a deux jours, j'ai rencontré un petit problème après avoir ajouté et supprimé le moniteur. Après l'avoir regardé, j'ai constaté que les paramètres devaient correspondre complètement. une correspondance complète signifie-t-elle autrement dit :

Copier le code Le code est le suivant :

$('.video')[0].addEventListener('timeupdate ', currentTimeHandler , vrai);

Par exemple, dans cette phrase, trois paramètres doivent être transmis pour qu'elle puisse être supprimée. Pourquoi faut-il que ce soit comme ça Oui, la partie douloureuse est là :
. Lors de l'ajout et de la suppression, le troisième paramètre n'a pas besoin d'être écrit, mais leurs conditions par défaut sont différentes à ce moment-là ! !

Normalement, addEventListener est faux...
1. Ajouter un écouteur d'événement personnalisé

Copier le code Le code est le suivant :

var eventHandlesCounter=1;//Compter le numéro d'événement auditeurs ajoutés, 0 comme bit réservé

Fonction addEvent(obj,evt,fn){

Si(!fn.__EventID){ fn.__EventID=eventHandlesCounter;}

Si(!obj.__EventHandles){ obj.__EventHandles=[];
Si(!obj.__EventHandles[evt]){

              obj.__EventHandles[evt]=[];

Si(obj["on" evt] instance de fonction){

                obj.__EventHandles[evt][0]=obj["on" evt];

                 obj["on" evt]=handleEvents;

           }

>

        obj.__EventHandles[evt][fn.__EventID]=fn;

        fonction handleEvents(){

        var fns = obj.__EventHandles[evt];

pour (var i=0;i
                                  fns[i].call(this);

>

>

2. Personnaliser la surveillance des événements de suppression

Copier le code Le code est le suivant :

function delEvent(obj,evt,fn){

if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){

Renvoie faux ;

>

if(obj.__EventHandles[evt][fn.__EventID]==fn){

Supprimer obj.__EventHandles[evt][fn.__EventID];

>

>

3. Modifier la méthode ci-dessus

Copier le code Le code est le suivant :

fonction addEvent(obj,evt,fn,useCapture){

    if(obj.addEventListener){//优先使用W3C事件注册

       obj.addEventListener(evt,fn,!!useCapture);

    }autre{

       if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter ;}

       if(!obj.__EventHandles){ obj.__EventHandles=[];}

       if(!obj.__EventHandles[evt]){

           obj.__EventHandles[evt]=[];

           if(obj["on" evt]){

              (obj.__EventHandles[evtype][0]=obj["on" evtype]).__EventID=0;

           >

           obj["on" evtype]=addEvent.execEventHandles;

       >

    >

>

addEvent.__EventHandlesCounter=1;

addEvent.execEventHandles = fonction (evt){

    if(!this.__EventHandles) {return true;}

    évt = évt || window.event;

    var fns = this.__EventHandles[evt.type];

    pour (var i=0;i
       if(fns[i] instance de fonction){

           fns[i].call(this);

       >

    >

};

fonction delEvent(obj,evt,fn,useCapture){

   if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数         

       obj.removeEventListener(evt,fn,!!useCapture);

   }autre {

      if(obj.__EventHandles){

         var fns = obj.__EventHandles[evt];

         if(fns){delete fns[fn.__EventID];}

      >

>

4、标准化事件对象

复制代码代码如下 :

fonction fixEvent(evt){

   si(!evt.target){

      evt.target = evt.srcElement;

      evt.preventDefault=fixEvent.preventDefault;

      evt.stopPropagation = fixEvent.stopPropagation;

      if(evt.type == "mouseover"){

         evt.ratedTarget = evt.fromElement;

      }else if(evt.type == "mouseout"){

         evt.ratedTarget = evt.toElement;

      >

      evt.charCode =(evt.type == "keypress")?evt.keyCode:0;

      evt.eventPhase = 2;

      evt.timeStamp = (new Date()).getTime();

   >

retourner l'événement ;

>

fixEvent.preventDefault=function(){ this.returnValue=false;}

fixEvent.stopPropagation=function(){this.cancelBubble = true;};

fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最Il n'y a aucun moyen d'utiliser addEvent pour exécuter execEventHandles.

复制代码代码如下 :

addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行

if (!this.__EventHandles) {return true;}

evt = fixEvent(evt || window.event);//在这里对其进行标准化操作

var fns = this.__EventHandles[evt.type];

pour (var i=0;i< fns.length;i ) {

if (fns[i] instanceof Function) {

fns[i].call(this,evt);//并且将其作为事件处理函数的第一个参数

//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };

上面是高手写了，下面整理几个实际的监听事情的例子

复制代码代码如下 :

test6.html

Ici, document.getElementById("1").attachEvent("onclick",test); est utilisé pour la liaison d'événement dynamique, et

est utilisé pour copier le code Le code est le suivant :

document.getElementById("1").detachEvent("onclick",test)

Annulez le temps dynamique, afin que cet événement ne puisse recevoir une réponse qu'une seule fois et que le bouton ne soit plus cliqué la prochaine fois. Quel effet cela a-t-il produire.
Vous trouverez ci-dessous une autre démonstration de surveillance des événements du clavier à tout moment pour déterminer si l'entrée est un nombre. Si ce n'est pas un nombre, il vous demandera dynamiquement puis rejettera l'entrée
.

Copier le code Le code est le suivant :

test7.html

Veuillez entrer un numéro

L'événement ici est un objet événement, qui peut renvoyer de nombreuses informations. Veuillez vous référer aux documents pertinents pour plus de détails.

Supplément : Compatibilité en suivi événementiel

1. IE utilise la méthode attachEvent/detachEvent pour ajouter et supprimer des écouteurs d'événements ; w3c utilise la méthode addEventListener/removeEventListener.
2. IE utilise la méthode de dénomination onevent pour ses événements, tandis que w3c utilise la méthode de dénomination d'événement.
3. L'écouteur d'événement IE utilise un objet Event global, tandis que w3c transmet l'objet événement à l'écouteur en tant que paramètre.
4. Afin d'éviter de déclencher le comportement d'événement par défaut, IE demande aux programmeurs de définir la valeur de l'attribut returnValue dans l'objet Event sur false, tandis que l'approche du w3c consiste à exécuter la méthode PreventDefault.
5. IE ne prend pas en charge la phase de capture d'événements.
6. Pour arrêter la livraison des événements, l'approche d'IE consiste à définir CancelBubble de l'objet événement sur true, tandis que l'approche de W3C consiste à définir et à exécuter la méthode stopPropagation.
7. IE appelle l'écouteur d'événement en tant que fonction indépendante, mais dans w3c, il est appelé en tant que méthode de l'objet. Cela signifie que le mot clé this dans l'écouteur d'événement dans IE ne pointe pas vers l'objet d'événement mais vers un objet global inutile. objet (objet fenêtre).
8. IE a un problème de fuite de mémoire lors de l'utilisation des écouteurs d'événements. Dans le navigateur IE, si vous souhaitez créer un écouteur d'événement pour un élément et utiliser l'élément dans l'écouteur, l'espace mémoire occupé par l'écouteur et les nœuds DOM associés ne sera pas occupé avant que l'utilisateur n'entre dans d'autres pages.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.