Pseudo-custom events in Prototype 1.6
Andrew Dupont has written a tutorial on how to normalize proprietary browser events using Prototype’s new custom events feature.
The piece is interesting as it talks about how the Prototype core team originally went down the wrong path trying to boil the ocean with great features that were a bit too much. And then:
we refocused, trimmed the fat, and added a whole bunch of features to the event system while still excluding thie kitchen sink. We picked some low-hanging fruit; for instance, we normalized the event object so that properties like target exist in all browsers, and we ensured events fire in the scope of the element in IE (so that this refers to the proper thing).
But we also added cross-browser support for custom events. Now developers can fire their own events alongside native browser events and can listen for both types with the same API. Custom events will make Prototype add-ons at least 50% more righteous, allowing for even more control than the standard callback pattern. Imagine TableKit firing an event when a cell gets edited, or PWC firing an event when a dialog is resized.
Since the 1.6 RC1 release, several people have asked whether we have any plans to add native support for mouseenter, mouseleave, or mousewheel. I think we ought not, lest the event codebase become an unholy thicket of special-casing. That’s the sort of environment where bugs thrive.
But, as Sam points out, the addition of custom events makes it easy for third parties to add their own support for proprietary browser events. To demonstrate, today we’ll write 20 lines of code to add sane, cross-browser support for mouse wheel events.
I’m calling these pseudo-custom events because they serve the same purpose as standard browser events: they report on certain occurrences in the UI. Here we’re using custom events to act as uniform façades to inconsistently-implemented events. Together we’ll write some code to generate mouse:wheel events. At the end of this article, you’ll know enough to be able to write code to generate mouse:enter and mouse:leave events document-wide.
This leads you into the example itself which takes you through a number of iterations before ending up with:
-
-
(function() {
-
function wheel(event) {
-
var realDelta;
-
-
// normalize the delta
-
if (event.wheelDelta) // IE & Opera
-
realDelta = event.wheelDelta / 120;
-
else if (event.detail) // W3C
-
realDelta = -event.detail / 3;
-
-
if (!realDelta) return;
-
-
var customEvent = event.element().fire(“mouse:wheel”, {
-
delta: realDelta });
-
if (customEvent.stopped) event.stop();
-
}
-
-
document.observe(“mousewheel”, wheel);
-
document.observe(“DOMMouseScroll”, wheel);
-
})();
-
(Via Ajaxian.)
I’m working on an article which explores MooTools custom events. I’ll make sure to include a comparison to Prototype’s implementation. How do they differ?
I wrote an article on MooTools’ mouseenter and mouseleave events by the way. They aren’t custom events per se but they are certainly very helpful, and as far as I know, Prototype doesn’t implement them.
http://www.thetruetribe.com/2008/05/mootools-mouseenter-and-mouseleave.html
Jonah Dempcy
May 16, 2008 at 8:52 pm