Rich, declarative, custom events made easy! Don't just listen for 'click'.
The easiest way to use rich, declarative custom events and clean up your event handling!
It's pretty simple; you add a
trigger="foo"" to an element, when the
user "pulls it" (click or Enter keyup, as appropriate), your custom event
will fire automatically. You no longer have to manually translate clicks and
If that's not enough, doing
trigger="validate save" will trigger the "validate" and "save"
events in sequence. Your list of events can be as long as you like. To stop the sequence,
catch an event in it and call
to prevent the rest of the events in the list from happening.
But wait, there's more! You probably want to distinguish your battleship's "explode" event from a mere
missile's "explode". Just add a namespace like so:
Your explosion listener can check the
Or perhaps you want to throw in a little contextual data:
As you guessed, it gets JSON parsed and stuck at
You can even add simple tags to your events:
event.tags and each
Be warned, if you feel crazy enough to use awful (but rich and declarative) combinations of all three:
trigger="yell.player['howdy!']#loud", then you must put them in that namespaces, data, tags order.
var game = documentquerySelector'#chutesAndLadders';gameaddEventListener'nextPlayer'player = playernext;;gameaddEventListener'move'var distance = gamequerySelector'[name=roll]'value;if eup playerclimbdistance;if edown playerslidedistance;if playerhasWon epreventDefault;//blocks nextPlayer event;
If you, for some strange reason, care about "valid HTML", then you can do this:
trigger_attr = 'data-trigger';
But personally, I don't recommend it.