Explication détaillée de l'implémentation javascript des compétences personnalisées events

Nous utilisons généralement onclick, onmouseover et une série d'événements de comportement spécifiques au navigateur lors de l'utilisation du DOM
. Ainsi, les événements personnalisés, comme leur nom l'indique, doivent définir vos propres types d'événements et fonctions de traitement d'événements. Lorsque vous avez besoin du type d'événement nécessaire au bon moment, vous pouvez appeler quel gestionnaire

Événements par défaut du navigateur pris en charge par 1.js

Les événements liés aux comportements spécifiques du navigateur, ou aux événements système, aux événements par défaut js, etc. sont tous très bien. Tout le monde sait à quoi je fais référence, je les appellerai ci-dessous.
Je pense que tout le monde a utilisé une série d'opérations telles que la liaison d'événements et la suppression d'événements par défaut de js, telles que :

//DOM0级事件处理程序
var oDiv = document.getElementById('oDiv');
oDiv.onclick = function(){
  alert("你点击了我");
}

Copier après la connexion

//DOM2级事件处理程序
var oDiv = document.getElementById('oDiv');

//非ie
oDiv.addEventListener("click",function(){
  alert("你点击了我");
},false); 

//ie
oDiv.attachEvent("onclick", function(){
  alert("你点击了我");
});

Copier après la connexion

Je ne ferai pas trop de recherches. Après tout, nous allons discuter des événements personnalisés js. Voici un code que j'ai déjà encapsulé pour gérer les événements par défaut de js :

//跨浏览器的事件处理程序 
//调用时候直接用domEvent.addEvent( , , );直接调用 
//使用时候，先用addEvent添加事件，然后在handleFun里面直接写其他函数方法，如getEvent； 
//addEventListener和attachEvent---都是dom2级事件处理程序 
var domEvent = { 
  //element:dom对象，event:待处理的事件，handleFun:处理函数 
  //事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等 
  addEvent:function(element,event,handleFun){ 
    //addEventListener----应用于mozilla 
    if(element.addEventListener){ 
      element.addEventListener(event,handleFun,false); 
    }//attachEvent----应用于IE 
    else if(element.attachEvent){ 
      element.attachEvent("on"+event,handleFun); 
    }//其他的选择dom0级事件处理程序 
    else{ 
      //element.onclick===element["on"+event]; 
      element["on"+event] = handleFun; 
    } 
  }, 
  //事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等 
  removeEvent:function(element,event,handleFun){ 
    //removeEventListener----应用于mozilla 
    if (element.removeEventListener) { 
      element.removeEventListener(event,handleFun,false); 
    }//detachEvent----应用于IE 
    else if (element.detachEvent) { 
      element.detachEvent("on"+event,handleFun); 
    }//其他的选择dom0级事件处理程序 
    else { 
      element["on"+event] = null; 
    } 
  }, 
  //阻止事件冒泡 
  stopPropagation:function(event){ 
    if(event.stopPropagation){ 
      event.stopPropagation(); 
    }else{ 
      event.cancelBubble = true;//IE阻止事件冒泡，true代表阻止 
    } 
  }, 
  //阻止事件默认行为 
  preventDefault:function(event){ 
    if(event.preventDefault){ 
      event.preventDefault(); 
    }else{ 
      event.returnValue = false;//IE阻止事件冒泡，false代表阻止 
    } 
  }, 
  //获得事件元素 
  //event.target--非IE 
  //event.srcElement--IE 
  getElement:function(event){ 
    return event.target || event.srcElement; 
  }, 
  //获得事件 
  getEvent:function(event){ 
    return event&#63; event : window.event; 
  }, 
  //获得事件类型 
  getType:function(event){ 
    return event.type; 
  } 
};

Copier après la connexion

Continuons avec le sujet suivant, les événements personnalisés js

2. Le littéral d'objet encapsule les événements personnalisés js

Selon le package ci-dessus, on peut concevoir comme ça

var eventTarget = {
  addEvent: function(){
    //添加事件
  },
  fireEvent: function(){
    //触发事件
  },
  removeEvent: function(){
    //移除事件
  }
};

Copier après la connexion

Je pense que c'est plus facile à comprendre pour tout le monde, et puis il y a une autre question à laquelle vous pouvez penser, à savoir les événements par défaut de js, js peut correspondre un à un, savoir lequel est-ce, alors qu'en est-il de notre coutume événements, celui-ci un par un. La table de cartographie correspondante ne peut être établie que par nous-mêmes, et ensuite je fais ça

var eventTarget = {
  //保存映射
  handlers:{},
  addEvent: function(){
    //处理代码
  },
  fireEvent: function(){
    //触发代码
  },
  removeEvent: function(){
    //移出代码
  }
};

Copier après la connexion

C'est ainsi que j'ai construit cette relation cartographique

handlers = {
  "type1":[
    "fun1",
    "fun2",
    // "..."
  ],
  "type2":[
    "fun1",
    "fun2"
    // "..."
  ]
  //"..."
}

Copier après la connexion

De cette façon, chaque type peut avoir plusieurs fonctions de traitement pour faciliter notre expansion future
Vient ensuite l'aspect proprement dit du codage, l'écriture d'un code de traitement spécifique...

Je crois que tout le monde est déjà très clair sur cette idée, je vais directement joindre le code

//直接量处理js自定义事件
var eventTarget = {
  //保存事件类型，处理函数数组映射
  handlers:{},
  //注册给定类型的事件处理程序，
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  addEvent: function(type, handler){
    //判断事件处理数组是否有该类型事件
    if(eventTarget.handlers[type] == undefined){
      eventTarget.handlers[type] = [];
    }
    //将处理事件push到事件处理数组里面
    eventTarget.handlers[type].push(handler);
  },
  //触发一个事件
  //event -> 为一个js对象，属性中至少包含type属性，
  //因为类型是必须的，其次可以传一些处理函数需要的其他变量参数。（这也是为什么要传js对象的原因）
  fireEvent: function(event){
    //判断是否存在该事件类型
    if(eventTarget.handlers[event.type] instanceof Array){
      var _handler = eventTarget.handlers[event.type];
      //在同一个事件类型下的可能存在多种处理事件，找出本次需要处理的事件
      for(var i = 0; i < _handler.length; i++){
        //执行触发
        _handler[i](event);
      }
    }
  },
  //注销事件
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  removeEvent: function(type, handler){
    if(eventTarget.handlers[type] instanceof Array){
      var _handler = eventTarget.handlers[type];
      //在同一个事件类型下的可能存在多种处理事件，找出本次需要处理的事件
      for(var i = 0; i < _handler.length; i++){
        //找出本次需要处理的事件下标
        if(_handler[i] == handler){
          break;
        }
      }
      //删除处理事件
      _handler.splice(i, 1);
    }
  }
};

Copier après la connexion

Il s'agit d'une méthode d'appel de run

eventTarget.addEvent("eat",function(){
  console.log(123);  //123
});
eventTarget.fireEvent({type: "eat"});

Copier après la connexion

Cette méthode présente un inconvénient, l'événement de traitement ne peut pas être supprimé, car nous utilisons une table de mappage pour le faire, et il n'est pas recommandé de stocker directement autant de données dans la table de mappage, ce qui est un peu trop.

Une autre méthode pour extraire les événements de traitement (recommandé)

function b(){
   console.log(123);
}
eventTarget.addEvent("eat",b);
eventTarget.fireEvent({
  type: "eat"
});                   //123
eventTarget.removeEvent("eat",b);
eventTarget.fireEvent({type: "eat"});  //空

Copier après la connexion

Vous pouvez également transmettre plus de paramètres

eventTarget.fireEvent({
  type: "eat",
  food: "banana"
}); 
function b(data){
   console.log(data.food); //banana
}

Copier après la connexion

Résumé : La méthode littérale présente un léger inconvénient, c'est-à-dire que si nous attribuons accidentellement un certain attribut à null dans la fonction de gestionnaire, cela entraînera le crash de notre méthode eventTarget. Il semble que le prototypage devrait être une bonne méthode et un peu plus sûre.

3. Le prototype d'objet encapsule les événements personnalisés js

Étant donné que les idées précédentes sont fondamentalement expliquées clairement, je joindrai directement le code ici. Vous pourrez étudier les avantages et les inconvénients, et peut-être pourrez-vous trouver une meilleure façon de le résoudre...

//自定义事件构造函数
function EventTarget(){
  //事件处理程序数组集合
  this.handlers = {};
}
//自定义事件的原型对象
EventTarget.prototype = {
  //设置原型构造函数链
  constructor: EventTarget,
  //注册给定类型的事件处理程序，
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  addEvent: function(type, handler){
    //判断事件处理数组是否有该类型事件
    if(typeof this.handlers[type] == 'undefined'){
      this.handlers[type] = [];
    }
    //将处理事件push到事件处理数组里面
    this.handlers[type].push(handler);
  },
  //触发一个事件
  //event -> 为一个js对象，属性中至少包含type属性，
  //因为类型是必须的，其次可以传一些处理函数需要的其他变量参数。（这也是为什么要传js对象的原因）
  fireEvent: function(event){
    //模拟真实事件的event
    if(!event.target){
      event.target = this;
    }
    //判断是否存在该事件类型
    if(this.handlers[event.type] instanceof Array){
      var handlers = this.handlers[event.type];
      //在同一个事件类型下的可能存在多种处理事件，找出本次需要处理的事件
      for(var i = 0; i < handlers.length; i++){
        //执行触发
        handlers[i](event);
      }
    }
  },
  //注销事件
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  removeEvent: function(type, handler){
    //判断是否存在该事件类型
    if(this.handlers[type] instanceof Array){
      var handlers = this.handlers[type];
      //在同一个事件类型下的可能存在多种处理事件
      for(var i = 0; i < handlers.length; i++){
        //找出本次需要处理的事件下标
        if(handlers[i] == handler){
          break;
        }
      }
      //从事件处理数组里面删除
      handlers.splice(i, 1);
    }
  }
};

Copier après la connexion

Méthode d'appel

function b(){
  console.log(123);
}

var target = new EventTarget();
target.addEvent("eat", b);

target.fireEvent({
  type: "eat"
});                 //123

Copier après la connexion

La méthode prototype a la même fonction que la méthode directe...

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.