Event-Handler mit JavaScript hinzufügen und entfernen

Event-Handler (dt. Ereignisbehandler) können in JavaScript über verschiedene Wege hinzugefügt werden. In den folgenden Code-Beispielen zeige ich die Vor- und Nachteile der jeweiligen Lösungen mit reinem JavaScript und jQuery.

Event-Handler hinzufügen

Möglichkeit 1

window.onload = function() {
  console.log('Ich bin ein Event-Handler.');
};
 
window.onload = function() {
  console.log('... allerdings überschreibe alle vorherigen Event-Handler.');
};

Möglichkeit 2

window.addEventListener('load', function() {
  console.log('Ich überschreibe NICHT meine vorherigen Event-Handler.');
  console.log('Allerdings funktioniere ich nicht in allen Browsern.');
  console.log('Im Internet Explorer 8 nennt man mich attachEvent()');
});

Möglichkeit 3

$(window).on('load', function() {
  console.log('Ich funktioniere in vielen Browsern!');
});

Möglichkeit 4

$(window).bind('load', function() {
  console.log('Ich bin die ALTE Variante von on()');
});

Möglichkeit 5

$(window).load(function() {
  console.log("Ich bin die Kurzschreibweise von on('load')");
});

Event-Handler entfernen

Möglichkeit 1

var handler = function() {
  console.log('Man kann mich auch entfernen!');
};
 
$(window).on('load', handler);
$(window).off('load', handler);

Möglichkeit 2

var handler = function() {
  console.log('Natürlich kann man mich auch ohne jQuery entfernen.');
};
 
window.addEventListener('load', handler);
window.removeEventListener('load', handler);

Event-Handler für mehrere Events

var handler = function() {
  console.log('Ich bin ein Event-Handler.');
};
 
$(window).on('load resize orientationchange', handler);

Ereignis auslösen / Event triggern

var handler = function() {
  console.log('Ich bin ein Event-Handler.');
};
 
$(window).on('orientationchange', handler);
$(window).trigger('orientationchange');

Event-Triggering mit Parameterübergabe

var handler = function($event, param1, param2) {
  console.log($event.type); // orientationchange
  console.log(param1); // Hello
  console.log(param2); // World
};
 
$(window).on('orientationchange', handler);
$(window).trigger('orientationchange', ['Hello', 'World']);

Event-Triggering mit Parameterübergabe und JSDoc

/**
 * Event handling example for 'window.onorientationchange' with jQuery.
 * 
 * @param {type} $event jQuery’s Event Object: http://api.jquery.com/category/events/event-object/
 * @param {type} param1 First argument from triggered parameters: http://api.jquery.com/trigger/
 * @param {type} param2 Second argument from triggered parameters: http://api.jquery.com/trigger/
 * @returns {undefined}
 */
var handler = function($event, param1, param2) {
  console.log($event.type); // orientationchange
  console.log(param1); // Hello
  console.log(param2); // World
};
 
$(window).on('orientationchange', handler);
$(window).trigger('orientationchange', ['Hello', 'World']);

Event-Handling mit jQuery Chaining

$(window).on('orientationchange', function($event, param1, param2) {
  console.log($event.type); // orientationchange
  console.log(param1); // Hello
  console.log(param2); // World
}).trigger('orientationchange', ['Hello', 'World']);

Nachteil: Event-Handler wurde mit einer anonymen Funktionen erstellt und lässt sich nicht über $(window).off('orientationchange', handler); entfernen. Die Lösung besteht in der Nutzung von eigenen Event-Namen.

Event-Handling mit eigenen Event-Namen

$(window).on('orientationchange.helloWorld', function() {
  console.log('Hello World');
});
 
$(window).trigger('orientationchange'); // Hello World
$(window).off('orientationchange.helloWorld');
$(window).trigger('orientationchange'); // Nothing...