Monthly Archives: January 2013

JavaScript custom events & custom event data

Es muss nicht immer jQuery sein. Für eigene Events, auf die mit einem EventListener reagiert werden kann, benötigt man nicht jQuery.Event() / $.trigger(). Fünf/sechs Zeilen JavaScript Code werden benötigt, auch nicht mehr, als würde man jQuery benutzten.

var evt = document.createEvent('Event');
evt.initEvent('bbEvent', true, true);
var customEventData = {
dataString: "Hello",
dataArray: ['W', 'o', 'r', 'l', 'd']
}
evt.data = customEventData;
element.dispatchEvent(evt);
window.addEventListener('bbEvent', function (event) {
console.log(event.data);
}
view raw customEventData.js hosted with ❤ by GitHub

Ich würde immer empfehlen, weitestgehend auf Libraries zu verzichten. Damit mein ich nicht, das Rad neu zu erfinden oder mehr Code als nötig zu schreiben. Obiges Beispiel macht aber deutlich, dass man durch jQuery nichts gewinnt, aber sich von eben dieser abhängig macht. Das kann sich rächen!

*** Update: 05.12.2013:

createEvent() ist (mittlerweile) veraltet und man sollte das Ganze nun mit CustomEvent() umsetzen. CustomEvent ist nicht verfügbar im IE < 10; durch einen Polyfill (mit createEvent()) kann es trotzdem zum Einsatz kommen.