Category Archives: /hack

Disable Tap-Highlighting in Safari / iOS / Android / WebKit

Beim entwickeln von WebApps und hybrid Apps benötigt man viele kleine Workarounds um das native Feeling so gut wie möglich zu simulieren. Links werden im mobilen Safari / WebKit bei einem Tap mit typischen, leicht durchsichtigen, “Apple”-Blau gehighlightet.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Neben dem Entfernen gibt es natürlich auch die Möglichkeit per rgba dieses Highlighting in CI-Farben darzustellen. Dabei sollte darauf geachtet werden, dass der letzte Wert nicht 1 ist, dann ist das Highlighting nicht mehr durchsichtig und würde das getapte Element verdecken.

HTTP Digest Authentication & verschlüsselte (md5) Ablage des Passworts in der DB

Bei einer kürzlich geschriebenen WebApp benutzte ich die HTTP Digest Auth für die Authentifizierung der User. Das einzige Problem hierbei ist, dass das Passwort des Nutzers im Klartext vorhanden sein muss. Ich wollte das Passwort aber nicht als Klartext in der Datenbank haben (obvious). Die kleine aber feine Lösung:

Den ersten Part der Digest-Checksum (A1), siehe Wikipedia, in der Datenbank ablegen. Dieser ist der md5-Hash des kombinierten Strings aus UserID, Realm (beliebiger Name) und Passwort: A1 = md5(uid:realm:pass)

JSONP – Eine Methode um die Same-Origin-Policy zu umgehen

Die Same-Origin-Policy untersagt clientseitigen Skriptsprachen wie JavaScript Anfragen an Server zu stellen, die nicht der gleichen Herkunft / dem gleichen Speicherort entsprechen. Das ist eigentlich eine gute Sache, da es der Sicherheit beiträgt und gut zur Natur von JavaScript passt. Es gibt aber Fälle, bei denen man beabsichtigt Anfragen an andere Server stellen will. Als offensichtliches Beispiel wäre hier die Datenabfrage bei Diensten wie Twitter oder ähnlichen. Hierfür gibt es zum Beispiel JSONP, JSON with Padding.

Was steckt hinter JSONP

JSONP nutzt eine “Lücke” um eine HTTP-Anfrage an einen Server zu senden, der nicht der gleichen Herkunft (Origin) wie der des JavaScripts entspricht. Die SRC-Attribute im Script-Tag können GET-Anfragen an Server beliebiger Herkunft senden. GET eigentlich im Sinne von: Schick mir mal das JavaScript (meist in Form einer .js-Datei) und nicht im Sinne von; Schick mir mal die JSON Daten.

Was aber beim Script-Tag eigentlich passiert ist, dass der Browser die JavaScript-Datei lädt und ausführt. Aus

<script type="text/javascript" src="http://meinserver.de/meinScript.js"></script>
view raw gistfile1.html hosted with ❤ by GitHub

wird also quasi ein:

<script type="text/javascript">
;(function() {
console.log("Hello World")
})();
</script>
view raw gistfile1.html hosted with ❤ by GitHub

Wie funktioniert nun JSONP?

JSONP nutzt eben beschriebenes Prinzip, indem der Server auf diese GET-Anfrage nicht mit normalen JSON-Daten antwortet, sondern noch ein Extra hinzufügt. Die JSON-Daten werden in einem Funktionsaufruf gehüllt, dieser Funktionsaufruf ist das P für Padding in JSONP. Das ist nicht unbedingt die beste Namenswahl gewesen, da Padding bei Webentwicklern durch CSS mental schon vorbelegt ist. Hier heisst es aber einfach nur, wie gesagt, dass die JSON-Daten in einem Funktionsaufruf gehüllt werden.

JSON: {"Name": "Benny Bennet", "Website": "http://ben.nyben.net"}
JSONP: verarbeiteDaten({"Name": "Benny Bennet", "Website": "http://ben.nyben.net"})
view raw gistfile1.js hosted with ❤ by GitHub

In der Regel teilt man dem Server per Parameter mit, in welchen Funktionsaufruf er die Daten hüllen soll.

<script type="text/javascript" src="http://some.tld/web/service?callback=verarbeiteDaten"></script>
... wird zu
<script type="text/javascript">
verarbeiteDaten({"Name": "Benny Bennet", "Website": "http://ben.nyben.net"})
</script>
view raw gistfile1.html hosted with ❤ by GitHub

Der geneigte JavaScripter müsste jetzt also nur noch irgendwo die Funktion “verarbeiteDaten” implementieren…

function verarbeiteDaten( data ) {
console.log(data["Name"]);
console.log(data["Website"]);
}
view raw gistfile1.js hosted with ❤ by GitHub

…und würde in seiner Console in diesem Beispiel die Ausgaben “Benny Bennet” und “http://ben.nyben.net” erhalten. Als Nachteil ist hier natürlich zu erwähnen, dass man dem Service 100% vertrauen können muss.

JavaScript Class à la bennybennet

Eines der schwierigsten Dinge, zumindest für mich, beim lernen von JavaScript, ist die Gewöhnung an funktionale Programmierung und die Implementierung von OO. Letzteres, weil JavaScript nicht die gängige Syntax aus andere C-Like-Block-Syntax-Sprachen benutzt, um “Objektbaupläne” aka Klassen zu beschreiben. In JavaScript gibt es keine Klassen. Um Objekte in JavaScript zu definieren, müssen wir also auf ein anderes Mittel zurückgreifen.

Eine Beispiel-Klasse in Java:

package de.bennybennet.examples;
public class Example extends Parent {
String exampleVarPP = "I'm only visible for every class in this package.";
private String exampleVarPriv = "I'm only visible for this class";
public Example() {
System.out.println("...entered the constructor");
}
public String getExampleVarPriv() {
System.out.println("...entered method of Example: Getter exampleVarPriv.");
return this.exampleVarPriv;
}
}
view raw Example.java hosted with ❤ by GitHub

JavaScript bietet für die Definition von Objekten sogenannte Prototypen. Ist man es gewohnt mit Klassen zu programmieren, dauert es häufig eine Weile, bis man prototypenbasierte Programmierung versteht. Der Sinn hinter Objekten und deren Vererbbarkeit ist die Wiederverwendung von Code. In Klassenbasierten sprachen geschieht dies, logisch, durch Klassen. Klassen können von anderen Klassen erben. Objekte entstehen durch Instanzierung von Klassen. In prototypbasierten Sprachen, werden Objekte durch das Klonen bereits bestehender Objekte erzeugt. Hierdurch kann auch eine Vererbung realisiert werden. Das Objekt “Child” wird aus einem Klon vom Objekt “Parent” erstellt und kann anschließend um Attribute und Methoden erweitert werden, die dann nur dem Objekt “Child” und Klons vom Objekt “Child” zur Verfügung stehen, nicht aber Objekt Parent oder weiteren Klons von diesem. Das Objekt Parent war der Prototyp für den Klon “Child”. Es werden keine Instanzen im Java-Sinne von Objektbauplänen (Klassen, Prototypen) in JavaScript erzeugt, weshalb das “new” in JavaScript sehr irreführend ist. Weiteres und näheres möchte ich gerne in einem anderen Post beschreiben.

Die folgende Notation, um klassenähnliche Definition von Objekten in JavaScript zu haben, ist hauptsächlich als akademisch anzusehen. Ich habe sie in meinen ersten Begegnungen mit JavaScript abseits von jQuery erstellt, hauptsächlich um JavaScript besser zu verstehen. Ist JS dein täglich Brot (oder besser: soll es das werden), empfehle ich stark, keine klassenähnlichen Konstrukte in JavaScript zu verwenden. Setzte dich intensiv mit prototypenbasierter Programmierung auseinander und verstehe, wie diese in JavaScript umgesetzt ist / funktioniert.

/* Simple JavaScript Inheritance
* First draft!
* @author Benny Bennet Jürgens (http://ben.nyben.net)
* CC-by-sa 3.0 - please provide my name and url
*/
;(function() {
"use strict";
this.BBClass = function(ctor, proto) {
ctor.prototype = proto || {};
ctor.prototype.constructor = ctor;
ctor.extends = function(parent) {
function ChildBB() {
parent.prototype.constructor.apply(this, arguments);
ctor.apply(this, arguments);
};
ChildBB.prototype = ( typeof Object.create !== 'function') ?
(function(parent) {
function F() {};
F.prototype = parent.prototype;
var prototype = new F();
prototype.constructor = ChildBB;
return prototype;
})(parent)
: Object.create(parent.prototype, { constructor: { value: ChildBB, enumerable: false }});
return ChildBB;
}
return ctor;
}
}).call(this);
var Person = BBClass(function(isDancing) {
console.log("person");
this.dancing = isDancing;
});
Person.prototype.dance = function() {
return this.dancing;
};
var Ninja = BBClass(function(isDancing) {
console.log("ninja");
}).extends(Person);
Ninja.prototype.swingSword = function() {
return true;
};
Ninja.prototype.arraytest = [1,2,3,4];
var p = new Person(true);
var n = new Ninja(false);
Person.prototype.test2 = function() { console.log("test2 bestanden"); };
console.log(n.arraytest);
console.log(p.dance());
console.log(n.dance());
console.log(n.swingSword())
p.test2();
n.test2();
console.log("inherit ok?")
console.log( p instanceof Object);
console.log( p instanceof Person);
console.log( p instanceof Person && p instanceof Object && n instanceof Ninja && n instanceof Person && n instanceof Object);
=> person
=> person
=> ninja
=> [1,2,3,4]
=> true
=> false
=> true
=> test2 bestanden
=> test2 bestanden
=> inherit ok?
=> true
=> true
=> true
view raw class.js hosted with ❤ by GitHub

Ich empfehle auch die Kommentare im Gist einmal durchzulesen. Dort habe ich meine Gedanken während der Entwicklung runtergeschrieben.

Custom styling für die Select-Box (auch im IE)

Custom Select-Box

Custom Select-Box

Ab und an kommen Designer auf die Idee, den Style der Select-Box so stark anzupassen, dass ein setzen des Backgrounds und vielleicht noch die Anpassung der Schriftart nicht reicht. Mit CSS3 ist jetzt auch sehr leicht viel mehr möglich. Wer aber noch den IE8 oder IE9 unterstützen muss, guckt in die Röhre. Ich weiß gar nicht, ob der IE10 dieses Feature schon unterstützt…?

Für die im folgenden beschriebene Möglichkeit ist JavaScript von nöten. Über die SelectBox für ein Span gelegt, welches das entsprechende Styling durch Background-Images oder sonstige CSS-Angaben bekommt. Die Ursprüngliche Select-Box liegt dank “z-index” aber über dem Span und wird per “opacity” durchsichtig gemacht. Der Inhalt des Spans wird per JavaScript immer auf die aktuelle Auswahl der Select-Box gesetzt.

Im Sinne von Progressive Enhancement, also der schrittweisen Anreicherung / Verbesserung, je nach Möglichkeiten, wird im Markup (HTML) zunächst nur eine normale Select-Box angegeben.

<select name="topics-select" id="topics-select" class="bb-styled">
<option selected>Themen</option>
<option>Thema 1</option>
<option>Thema 2</option>
</select>
view raw selectbox-style.html hosted with ❤ by GitHub

Das nötige Span-Element und der DIV-Container (Wrapper) wird, sofern JavaScript aktiviert ist, später hinzugefügt. Würden wir den Span und DIV-Container, inklusive Stylesheet-Angaben, direkt im Markup haben, könnte die Select-Box von einem User ohne JavaScript nicht mehr benutzt werden.

$('select.bb-styled').each(function(){
var title = $(this).attr('title');
if( $('option:selected', this).val() != '' ) title = $('option:selected',this).text();
var idName = $(this).attr('id') + '_container';
$(this).before('<div class="bb-styled-container" id="' + idName + '"></div>')
$('#' + idName).append(this);
$(this)
.css({'opacity':0})
.after('<span class="bb-styled">' + title + '</span>')
.change(function(){
val = $('option:selected',this).text();
$(this).parent().find('span').text(val);
})
});
view raw selectbox-style.js hosted with ❤ by GitHub

Hier noch das benötigte Stylesheet:

div.bb-styled-container { position:relative; margin: 50px; }
select.bb-styled {
position: relative;
z-index:10;
display: block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
span.bb-styled {
position: absolute;
bottom: 0;
left: 0;
cursor: default;
z-index: 1;
}
span.bb-styled:after {
content: '<>';
display: inline-block;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
font-size: 10px;
height: 10px;
width: 10px;
float: right;
margin-top: -7px;
}
.bb-styled {
background-color: #ccc;
color: #000;
text-indent: 10px;
width: 200px;
border: 1px solid white;
border-radius: 4px;
font-size: 13px;
font-weight: normal;
font-family: Arial;
line-height: 18px;
}
view raw selectbox-style.css hosted with ❤ by GitHub

Demo-Code

Zum Abschluss das ganze noch in einem jsFiddle: http://jsfiddle.net/2zr78/2/

Bitte gerne Verbesserungsvorschläge in die Kommentare posten. Ich sehe es derzeit als ersten Entwurf. Vor allem mit der Struktur des CSS bin ich noch nicht richtig zufrieden, das Outcome (grauer Kasten ohne alles) ist hier nur zu Demozwecken, bei Zeiten lass ich mir aber mal etwas hübscheres einfallen. ;-p Der Code kann definitiv noch optimiert werden, zum Beispiel kann das JavaScript getrickse für die neusten WebKit-Versionen unterlassen werden.

Ein Nachteil von jQuery? Performance!

jQuery ist eine beliebte Library zur DOM-Manipulation (und mehr) in JavaScript. Diese Library hat wahrscheinlich mehr Anwender zu JavaScript gebracht als irgendetwas anderes. Sie beschleunigt den Entwicklungsprozess erheblich, vor allem für Anfänger und bei Cross-Browser-Problemen. Vor noch nicht allzu langer Zeit war Letzteres ein echtes Problem. Heute bietet JavaScript, abgesehen von der Implementierung des InternetExplorers, viele / ausreichend Funktionen zur DOM-Manipulation.

Beim Review eines JavaScript-Codes eines Kollegen, welcher jQuery nutzt, unterhielten wir uns zunächst nur über die performance Unterschiede zwischen Caching und nicht Caching von Elementen zur Manipulation der Width-Eigenschaft. Es wurde eine $(selector).each() verwendet und es ging darum, ob innerhalb der Each-Function das aktuelle DOM-Element gecached wird, oder nicht.

// !--- Caching
$(selector).each(function( index ) {
  var $el = $(this);
  // 2-3 DOM-Manipulationen an dem Element
  // mit Benutzung von $el, z.B. $el.width()
});

// !--- kein Caching
$(selector).each(function( index ) {
  // 2-3 DOM-Manipulationen an dem Element
  // mit Benutzung von $(this), z.B. $(this).width()
});

Da es wirklich nur zwei – drei Anweisungen waren, ging es zunächst nur darum, ob die extra Zeile mit der Anweisung des Cachings nötig ist oder ob es in diesem Fall wirklich Vorteile in der Performance bringt. Der Performance-Frage bin ich dann mit jsPerf hinterher gegangen. Dank einer kleinen Diskussion kamen zwei Dinge zum Vorschein:

  1. jQuery.width() ist extrem langsam und sollte durch jQuery.css() ersetzt werden.
  2. Plain JavaScript schlägt die jQuery Performance um viele 100 wenn nicht sogar 1000%.

Zum ersten Punkt:

“One thing that hasn’t changed is the return value of the .width() method. As it’s always been documented, it gets and/or sets the “content” width of an element, and that is regardless of the CSS box-sizing being used by the element. However, jQuery 1.8 now needs to check the box-sizing property whenever you use .width() so that it can decide whether it needs to subtract out the padding and border width. That can be expensive—up to 100 times more expensive on Chrome!”
http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

Auf obiges Zitat bin ich Dank eines Users in der Google+ JavaScript Community gekommen. Ich hatte dort meine jsPerf-Ergebnisse vorgestellt. Einige hatten meiner ursprünglichen Version auch noch einiges hinzugefügt, sodass wir mittlerweile bei der achten Revision sind. Die Revision 3 war die von mir vorgestellte Revision und hat die meisten Testergebnisse, weshalb sie auf jeden Fall auch beachtet werden sollte. Ansonsten empfehle ich Revision 8, weil dort alle Anmerkungen und Erweiterungen der Community enthalten sind*:

http://jsperf.com/jquery-cache-no-cache/8

Die Ergebnisse, die dort zu sehen sind, sind es, welche mich zu der Aussage des zweiten Punktes kommen lassen. Selbst wenn man jQuery.css() benutzt, hat man noch weit weniger Performance – verglichen mit vanilla JS. Vor allem für den mobilen Bereich ist das sicher sehr interessant, ist dort doch die Performance dringend benötigt und man muss sehr selten auf den IE Rücksicht nehmen.

*** Update am 12.07.2014
Habe nun noch eine Version erstellt, in der einige Fehler der Vorgänger behoben wurden und ein paar neue Vergleiche hinzugekommen sind. Außerdem habe ich auf die aktuelle jQuery Version (2.x) umgestellt. Trotz allem ist jQuery weiterhin in diesem Vergleich um ein vielfaches langsamer:

http://jsperf.com/jquery-cache-no-cache/13

Mehrere / mehrfarbige “border” (Rahmen) mit CSS

Embossed HTML Element aus Twitters Bootstrap mit Border und inset Shadow

Es kann öfters einmal nützlich sein, einem HTML-Element mehr als nur einen Rahmen zu geben, respektive dem Element einen mehrfarbigen Rahmen zuzuweisen. Als Beispiel: Man möchte, dass das Element so wirkt, als sei es in die Seite “eingedrückt” (embossed). Ich hatte mir vor ein paar Tagen Gedanken dazu gemacht, weil ich einen Rahmen nur im oberen Teil des Elements brauchte, der eigentlich durchgängig grau ist und 5px dick. Eigentlich… Ganz Links, fast schon unauffällig, sollten die ersten 5px der Linie gelb sein.CSS Border mit zwei Farben So gesehen also einen zweifarbigen Border. Lösbar wäre es über die neue “border-image” Definition gewesen, würde aber bedeuten, man müsste wieder ein Bildchen mehr übertragen. Man hätte auch einen “Fake-Border” mit zwei Divs (weiter unten beschrieben) erstellen können, das wollte ich aber vermeiden. Man sollte immer versuchen, das Font-End als Schichtenmodell zu behandeln. Neben “Unobtrusive JavaScript” also auch immer “Unobtrusive CSS” verwenden, somit sind Präsentationsänderungen unabhängig von der Struktur. Ein Artikel bleib ein Artikel. Die Lösung sollte ab IE8 lauffähig sein. Hier nun drei gute Lösungen für doppelte oder mehrfarbige Rahmen mit CSS(3):

Pseudo-Element

Mein Liebling. Mit dem Pseudo-Element “:before” ist es möglich, einen zwei- oder mehrfarbigen Rahmen anzulegen. Im Beispiel (http://jsfiddle.net/672LA/) habe ich das Umgesetzt, was ich oben als Eingangsproblem beschrieben habe; grauer, 5px dicker Rahmen, die ersten 5px der in der Länge gelb. So haben wir also einen zweifarbigen Border mit reinen CSS Mitteln.

#myDualColorBorder {
border-top: 5px solid #eaeaea;
position: relative;
}
#myDualColorBorder:before {
position: absolute;
top: -5px;
display: block;
content: '';
border-top: 5px solid #ffd300;
width: 5px;
}
view raw dualcolor_border.css hosted with ❤ by GitHub

Es ist aber auch einfach möglich, einen doppelten Rahmen anzulegen, zum Beispiel für den Anfangs erwähnten embossed Effekt. Dann einfach nur das Verschieben durch “top: -5px;” entfernen und die width auf 100% setzen. Soll der Rahmen an allen Seiten sein, wird noch ein “height: 100%;” benötigt. Hier ein Beispiel: http://jsfiddle.net/ftvJN/. Dort ist aber nur ein Rahmen oben, weswegen keine Höhendefinition beim Pseudo-Element zu finden ist.

All these nice things!

Outline

#myDoubleborder {
border: 2px solid green;
outline: 2px solid red;
}
view raw outline_border.css hosted with ❤ by GitHub

Führt zu folgendem Ergebnis: http://jsfiddle.net/qFGeN/1/. Bitte beachten, dass es bei Outline mit äußeren Schatten in CSS zu unerwünschtem Verhalten kommen kann. Die Outline legt sich teilweise um den äußeren Schatten und nicht um das Element.

Box-Shadow

Ein doppelter Rahmen mit der neuen Box-Shadow Angabe sollte der Outline-Variante vorgezogen werden. Es führt zum gleichen Ergebnis (http://jsfiddle.net/hZGa7/3/), die Outline-Angabe wird, wie oben erwähnt, nicht unbedingt von jedem Browser gleich behandelt, bzw. wie gewünscht gerendert.

#myDoubleShadowBorder {
border: 2px solid green;
box-shadow: inset 0px 0px 0px 2px red;
}
view raw shadow_border.css hosted with ❤ by GitHub

Der Box-Shadow eignet sich hervorragend für einen Eindrückeffekt. Früher wurde dieser Effekt häufig durch eine Grafik als background-image erzielt. Durch zwei Rahmen um ein Element, mit geschickter Farbabstufung, wurde dieser Effekt dank Photoshop anstelle reinem CSS erreicht. Meiner Meinung nach kommt der Effekt noch besser, wenn der Schatten nach innen einen leichten Verlauf hat. Das Ergebnis des folgendes Codes könnt ihr hier ansehen: http://jsfiddle.net/aPv9X/

#myEmbossedElement {
background-color: #eee;
border: 2px solid #eee;
border-radius: 5px;
box-shadow: inset 1px 1px 5px 1px #ddd;
}
view raw embossed_border.css hosted with ❤ by GitHub

Es gibt aber noch weitere Möglichkeiten, die ich nur eingeschränkt empfehlen kann. Variante Eins sollte nur bei wirklich grafisch aufwendigen Rahmen benutzt werden und Variante Zwei ist für diejenigen, die immer noch einen völlig veralteten Browser unterstützen (müssen). Variante Drei wird in den wenigsten Fällen von Nutzen sein, sei aber trotzdem erwähnt.

Border-Image

Zur Border-Image Definition kann man in Normans Blog die Grundlagen nachlesen. Das war gleich der erste Eintrag in Google, von daher gehe ich darauf hier nicht weiter ein, sollte reichen… 😉

Div

Diese Variante (http://jsfiddle.net/R5adG/) sollte sogar im IE6 laufen, überprüft habe ich es aber nicht. Ich würde sie nur empfehlen, wenn man keine der oben beschriebenen Möglichkeiten nutzen kann. Es ist immer sinnvoll, das Markup größtmöglich vom Styling zu trennen und unnötige Divs sollte man sowieso vermeiden.

Border-Style

Zum Abschluss sei noch die Variante zu nennen, die im ersten Moment als logisch erscheint. Es ist mit dem “border-style” durchaus auch möglich einen doppelten Rahmen oder einen Embossed-Effekt zu erzielen, aber die Flexibilität hält sich stark in Grenzen.

Zunächst das Beispiel: http://jsfiddle.net/FM3fF/, dann der Code

div {
width: 200px;
height: 100px;
margin: 30px auto;
}
#doubleBorder {
border-style: double;
}
#insetBorder {
border-style: inset;
}

0 ist nicht messbar

Der Wert 0 (Null, Zero) ist nicht messbar und benötigt daher keine Maßeinheit.
In CSS-Styles kommt es häufig vor, dass der Außen- oder Innenabstand (margin/padding) auf 0 gesetzt wird. Hier habe ich ab und an beobachtet, dass 0px, 0em oder ähnliches verwendet wird. Vielleicht steht auch mancher vor der Frage ob margin: 0 oder 0px besser ist. Besser ist falsch, es wird in allen Browsern zum gleichen Ergebnis führen und ist auch gleich performant. Es ist nur eine Frage der Semantik.

/* Don't use... */
body {
margin: 0px;
}
h1 {
padding: 0px;
}
/* ...instead use it without measurement units */
body {
margin: 0;
}
h1 {
padding: 0;
}
view raw 0value.css hosted with ❤ by GitHub

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.