Consider this familiar line:
#save is the id of a DOM element of some sort, likely a button. If you click on it,
saveModel() will execute. This is the same as below:
Any behavior that would have initiated by actually clicking the button is kicked off by
Less known is that
trigger can also be set on non-DOM objects:
jungle object keeps a running count of animals it encounters.
bind sets up listeners for the main animals in the jungle, ‘monkey’ and ‘bear’ (just go with it). When the document is ready, we fire off 4 events, 2 of which match our listeners, and
addAnimal executes accordingly.
Notice that event names are case sensitive, so ‘MONKEY’ did not trigger
addAnimal. Typos can be a real head scratcher since the browser doesn’t consider it illegal to be broadcasting ‘MONKEY’ sporadically. Google’s Closure Library assigns common events to constants for this reason, a practice I mimic in my own code. At runtime, if the property is misspelled, the browser should report an error to the console.
trigger links the ‘jungle’ to
event.target when it fires so we have a reference to the original object within the
This example is somewhat contrived. But imagine that we had an application that used server push and Ajax calls, and that we wanted to encapsulate both features into a single class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
All we care about regarding our
data instance is if a ‘NEW-ANIMAL’ arrives. We don’t care if it came in through a server push or from an Ajax ‘GET’.
The second parameter in
trigger is an array of parameters to pass to any listeners. By default, an event object will be the first parameter passed to bound functions. Subsequent function parameters will be the array parameters in order.