How Custom Events Will Save the Universe
29 likes16,001 views
Delivered at TXJS (http://texasjavascript.com) on June 5, 2010. All the major frameworks support custom events. All framework authors love custom events and want you to use them. But few people actually do. Custom events aren’t a gimmick. The ability to fire your own events — just like the browser fires click, mousemove, focus, and all the rest — can solve many of the problems large JS projects face. We’ll look at a handful of recipes for integrating custom events into your own code. You’ll learn how to fire custom events in each of the major JavaScript frameworks, and explore the advantages that custom events have over a standard callback pattern.
![$(document).bind('customevent', function(event, customData) {
// stuff
});
$('#troz').trigger('customevent', [{ foo: "bar" }]);](https://image.slidesharecdn.com/howcustomeventswillsavetheuniverse-100607004304-phpapp02/85/How-Custom-Events-Will-Save-the-Universe-14-320.jpg)
![(function() {
var KEYS = {};
KEYS[Event.KEY_ESC] = "esc";
KEYS[Event.KEY_UP] = "up";
KEYS[Event.KEY_DOWN] = "down";
KEYS[Event.KEY_LEFT] = "left";
KEYS[Event.KEY_RIGHT] = "right";
// ... and so on
function handler(event) {
if (event.keyCode && KEYS[event.keyCode]) {
event.element().fire("key:" + KEYS[event.keyCode], event);
}
}
document.observe("keydown", handler);
})();](https://image.slidesharecdn.com/howcustomeventswillsavetheuniverse-100607004304-phpapp02/85/How-Custom-Events-Will-Save-the-Universe-60-320.jpg)
How Custom Events Will Save the Universe
- 1. How CUSTOM EVENTS will save the universe
- 3. “Each unit should have only limited knowledge about other units.”
- 4. (we break this rule all the time)
- 5. the Law of Demeter is about removing unnecessary coupling
- 6. custom events can help decouple your code
- 7. Broadcaster and receiver don’t have to know about one another…
- 8. … so there’s far less to mock in your unit tests
- 9. YOU DO HAVE UNIT TESTS, RIGHT?
- 10. How do custom events work?
- 12. $(document).observe('custom:event', function(event) { var customData = event.memo; // stuff }); $('troz').fire('custom:event', { foo: "bar" });
- 14. $(document).bind('customevent', function(event, customData) { // stuff }); $('#troz').trigger('customevent', [{ foo: "bar" }]);
- 16. $(document).addEvent('customevent', function(event, customData) { // stuff }); $('troz').fireEvent('customevent', { foo: "bar" });
- 17. BUT WHY?
- 18. Why? Makes testing easier (maybe you’ll do it now)
- 19. Why? Rapid prototyping
- 20. Why? More versatile than callbacks
- 21. Why? Can be bubbled/canceled
- 22. Why? Can handle exceptions properly (in theory)
- 24. In Prototype, exceptions raised in one handler won’t affect another handler
- 25. (is this a big deal? smart people disagree)
- 26. CASE STUDIES
- 27. Case Studies # 1
- 28. Case Studies (script.aculo.us 2.0)
- 29. scripty2 uses custom events… …as a “metronome” for effects
- 30. window.setTimeout(function() { document.fire('effect:heartbeat'); }, 0);
- 32. Seems pointless… …until you need to debug
- 33. Step through an animation frame by frame document.observe('keydown', function(event) { if (event.keyCode === Event.KEY_RIGHT) { document.fire('effect:heartbeat'); } });
- 34. scripty2 uses custom events… …to pass messages between UI widgets
- 37. S2.UI.Menu (used by other S2.UI components)
- 38. var menu = new S2.UI.Menu(); menu.addChoice("Foo"); menu.addChoice("Bar"); someElement.insert(menu); menu.open();
- 39. S2.UI widgets act like elements when needed, so... menu.observe('ui:menu:selected', function(event) { console.log('user clicked on:', event.memo.element); });
- 40. Easy to use in any context
- 41. Button with menu
- 42. ASIDE: Custom events are cancelable
- 43. var event = $('troz').fire('custom:event'); if (!event.stopped) performSomeDefaultAction();
- 44. (prevent all menus from appearing) document.observe('ui:menu:before:open', function(event) { event.stop(); });
- 45. scripty2 uses custom events… …as hooks for debugging
- 46. “Why aren’t these effects queueing like I expect?”
- 47. document.observe('effect:dequeued', function(event) { var queue = event.memo; console.log("Effects in queue:", queue.size()); });
- 48. You get debugging FOR FREE
- 49. Case Studies # 2
- 50. Case Studies Mouse wheel
- 51. http://adomas.org/javascript-mouse-wheel/ window.addEventListener('DOMMouseScroll', handler); window.onmousewheel = handler; function handler(event) { var delta; if (event.wheelDelta) { delta = event.wheelDelta / 120; if (window.opera) delta = -delta; // (not a joke) } else if (event.detail) { delta = -event.detail / 3; } // Do stuff with your stupid delta }
- 53. window.addEventListener('DOMMouseScroll', handler); window.onmousewheel = handler; function handler(event) { var delta; if (event.wheelDelta) { delta = event.wheelDelta / 120; if (window.opera) delta = -delta; // (not a joke) } else if (event.detail) { delta = -event.detail / 3; } // Fire a custom event with the normalized delta. var result = event.target.fire('mouse:wheel', { delta: delta }); if (result.stopped) event.preventDefault(); }
- 55. Case Studies # 3
- 56. Case Studies User idle state
- 57. http://perfectionkills.com/detect-idle-state-with-custom-events/ credit: kangax document.observe('state:idle', function() { turnOffBackgroundAjaxRequests(); }); document.observe('state:active', function() { turnOnBackgroundAjaxRequests(); });
- 58. Case Studies # 4
- 59. Case Studies Keyboard events
- 60. (function() { var KEYS = {}; KEYS[Event.KEY_ESC] = "esc"; KEYS[Event.KEY_UP] = "up"; KEYS[Event.KEY_DOWN] = "down"; KEYS[Event.KEY_LEFT] = "left"; KEYS[Event.KEY_RIGHT] = "right"; // ... and so on function handler(event) { if (event.keyCode && KEYS[event.keyCode]) { event.element().fire("key:" + KEYS[event.keyCode], event); } } document.observe("keydown", handler); })();
- 61. Then you’d be able to do something like this: document.observe('key:left', function() { moveSlide(-1); }); document.observe('key:right', function() { moveSlide( 1); });
- 62. Case Studies # 5
- 64. Server-sent events are awesome… …but not universally supported
- 65. for browsers that support server-sent events var eventSource = $('event_source'); eventSource.observe('server-sent-event-name', function(event) { document.fire('data:received', event.data); });
- 66. for browsers that don’t new Ajax.Request('/legacy/polling', { onComplete: function(request) { document.fire('data:received', request.responseJSON); } });
- 67. observer works with either approach $(document).observe('data:received', function(event) { doStuffWithYourData(event.memo); });
- 68. …and your unit tests can fire dummy data function testThatSomethingHappened() { document.fire('data:received', FIXTURE_DATA); assertSomething(); }
- 69. FAQ
- 70. FAQ “What if my events aren’t DOM-related?”
- 71. (meh)
- 72. Use the DOM anyway, I say
- 73. FAQ “Isn’t this overkill?”
- 74. Yes, sometimes
- 75. FAQ “Aren’t events slow?”
- 76. NO
- 77. Events aren’t slow; they’re synchronous
- 78. Events are only as slow as the handlers attached to them
- 79. If performance is a concern, defer window.setTimeout(function() { document.fire('costly:custom:event'); }, 0);
- 80. QUESTIONS? Andrew Dupont http://andrewdupont.net