Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung des Beispielcodes zum Binden, Auslösen und Löschen von JavaScript-Ereignissen

Detaillierte Erläuterung des Beispielcodes zum Binden, Auslösen und Löschen von JavaScript-Ereignissen

伊谢尔伦
Freigeben: 2017-07-22 17:20:15
Original
1675 Leute haben es durchsucht

JavaScript ist das einfachste Ereignismodell, das das Binden und Auslösen von Ereignissen sowie das Löschen von Ereignissen erfordert.


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));
 }
 }
};
Nach dem Login kopieren

Es implementiert hauptsächlich Bind (Bindungsereignis), Unbind (Löschereignis) und Trigger (Auslöseereignis). Für denselben Ereignisnamen können mehrere Ereignisverarbeitungsfunktionen gebunden werden; sie werden nacheinander in der Reihenfolge der Bindung ausgelöst.

args.splice(0, handlers[i].length) Parameter, die beim Auslösen übergeben werden

Ereignisbindung und -auslösung:


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);
Nach dem Login kopieren

Ereignislöschung:


<button id="bind">bind</button>
<button id="unbind">unbind</button>
Nach dem Login kopieren


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
};
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes zum Binden, Auslösen und Löschen von JavaScript-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage