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

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));
 }
 }
};

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('myevent1', function (a) {
 console.log(a); // 1
}, function(b) {
 console.log(b); // 2
}, function(c, d) {
 console.log(c + ' + ' + d); // a + b
});
eventModel.bind('myevent1', function (e) {
 console.log(e); // 50
});
eventModel.trigger('myevent1', 1,2,'a','b', 50);

Suppression d'événement :

<button id="bind">bind</button>
<button id="unbind">unbind</button>

var fnX = function () {
 console.log('fnX');
}
var fnY = function () {
 console.log('fnY');
}
eventModel.bind('myevent2', fnX, fnY);
document.getElementById('unbind').onclick = function () {
 eventModel.unbind('myevent2', fnX); //删除 fnX 后，只剩下 fnY
};
document.getElementById('bind').onclick = function () {
 eventModel.trigger('myevent2'); //输出 fnX fnY
 //在点击unbind后，只输出 fnY
};

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!