Maison > interface Web > js tutoriel > Explication détaillée de l'exemple de code de liaison, de déclenchement et de suppression d'événements JavaScript

Explication détaillée de l'exemple de code de liaison, de déclenchement et de suppression d'événements JavaScript

伊谢尔伦
Libérer: 2017-07-22 17:20:15
original
1659 Les gens l'ont consulté

JavaScript est le modèle d'événement le plus simple, nécessitant la liaison et le déclenchement d'événements, ainsi que la suppression d'événements.


var eventModel = {
 list: {},
 bind: function () {
 var args = [].slice.call(arguments),
 type = args[0],
 handlers = args.slice(1);
 if (typeof type === 'string' && handlers.length > 0) {
  for (var i = 0; i < handlers.length; i++) {
  if (typeof handlers[i] === &#39;function&#39;) {
   if (!this.list[type]) {
   this.list[type] = [];
   }
   this.list[type].push(handlers[i]);
  }
  }
 }
 },
 unbind: function () {
 var type = arguments[0],
 handlers = Array.prototype.slice.call(arguments, 1);
 if (typeof type === &#39;string&#39;) {
  if (handlers.length === 0) {
  this.list[type] = [];
  } else {
  for (var i = 0; i < handlers.length; i++) {
   if (typeof handlers[i] === &#39;function&#39; && handlers[i] === this.list[type][i]) {
   this.list[type].splice(i, 1);
   }
  }
  }
 }
 },
 trigger: function () {
 var arguments = [].slice.call(arguments),
 type = arguments[0],
 args = arguments[1] instanceof Array && !arguments[2] ? arguments[1] : arguments.slice(1),
 handlers = this.list[type];
 for (var i = 0; i < handlers.length; i++) {
  handlers[i].apply(this, args.splice(0, handlers[i].length));
 }
 }
};
Copier après la connexion

Il implémente principalement la liaison (événement de liaison), la dissociation (événement de suppression) et le déclenchement (événement déclencheur). Pour le même nom d'événement, plusieurs fonctions de traitement d'événements peuvent être liées ; elles seront déclenchées séquentiellement dans l'ordre de liaison.

args.splice(0, handlers[i].length) Paramètres transmis lors du déclenchement

Liaison et déclenchement d'événement :


eventModel.bind(&#39;myevent1&#39;, function (a) {
 console.log(a); // 1
}, function(b) {
 console.log(b); // 2
}, function(c, d) {
 console.log(c + &#39; + &#39; + d); // a + b
});
eventModel.bind(&#39;myevent1&#39;, function (e) {
 console.log(e); // 50
});
eventModel.trigger(&#39;myevent1&#39;, 1,2,&#39;a&#39;,&#39;b&#39;, 50);
Copier après la connexion

Suppression d'événement :


<button id="bind">bind</button>
<button id="unbind">unbind</button>
Copier après la connexion


var fnX = function () {
 console.log(&#39;fnX&#39;);
}
var fnY = function () {
 console.log(&#39;fnY&#39;);
}
eventModel.bind(&#39;myevent2&#39;, fnX, fnY);
document.getElementById(&#39;unbind&#39;).onclick = function () {
 eventModel.unbind(&#39;myevent2&#39;, fnX); //删除 fnX 后,只剩下 fnY
};
document.getElementById(&#39;bind&#39;).onclick = function () {
 eventModel.trigger(&#39;myevent2&#39;); //输出 fnX fnY
 //在点击unbind后,只输出 fnY
};
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal