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.

1. How
CUSTOM EVENTS
will save the universe

2. Law of Demeter

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)

23. (quoth Dean Edwards)

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);

31. document.observe('effect:heartbeat', advanceEffectByOneFrame);

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
}

52. Instead, do this:

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();
}

54. See also:
hashchange

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

63. Data broadcasting

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