Response title
This is preview!
New event functionality
in Developing jQuery Core
•
4 years ago
I created a branch today to finally implement some ideas I've had to implement "special events". Basically I've made "ready" a first class event and the hooks for doing so allow us to create other special events. I've already implemented the following events: mouseenter, mouseleave and mousewheel. All of these events, including ready, can be implemented via the bind/unbind API.
<div><br class="webkit-block-placeholder"></div><div>$(...).bind("ready", fn);</div><div>$(...).unbind("ready", fn);</div><div>$(...).bind("mousewheel", function(event) { console.log(event.delta
); return false; });</div><div>
</div><div>I've also gone ahead and implemented the ability to bind multiple event types with one call.</div><div><br class="webkit-block-placeholder"></div><div>$(...).bind("mouseover mouseout mouseenter mouseleave", function(event) {
console.log(event.type); });</div><div><br class="webkit-block-placeholder"></div><div>I just implemented the changes and have only done minor testing with Firebug+Firefox only. </div><div><br class="webkit-block-placeholder">
</div><div>As far as file size goes ... </div><div>Original events.js: 13,771 bytes
</div><div>New events.js: 16,823 bytes</div><div>New events.js without mousewheel: 14,814 bytes (this still includes mouseenter and mouseleave)
</div><div><br class="webkit-block-placeholder"></div><div>The hover helper method has been re-factored to use the mouseenter and mouseleave events ... which means unbinding the hover is as simple and safe as $(..).unbind('mouseenter mouseleave', fn);
</div><div><br class="webkit-block-placeholder"></div><div>To add a "special event" just extend the jQuery.event.special like so:</div><div><br class="webkit-block-placeholder"></div><div>$.extend($.event.special, {
</div><div> myspecialevent: {</div><div> setup: function() {</div><div> // do the setup</div><div> // this == element</div><div> // return false to allow bind to call addEventListener and attachEvent respectively
</div><div> },</div><div> teardown: function() {</div><div> // undo what you did in setup</div><div> // this == element</div><div> // return false to allow unbind to call removeEventListener and detachEvent respectively
</div><div> }</div><div> }</div><div>};</div><div><br class="webkit-block-placeholder"></div><div>The setup and teardown methods are only called once per an element per an event type. Similar to how the actual event is only bound once per an element per an event type. The jQuery events API does the rest (the majority) of the heavy lifting.
</div><div><br class="webkit-block-placeholder"></div><div>In my implementations I've also added a "handler" function as well as the setup and teardown functions. This handler function provides any normalization, etc needed before calling the handlers. If you take a look at the branch you'll notice that I return false on the mouseenter and mouseleave events if it is IE. This way IE can handle them natively while the other browsers will use the special event handler.
</div><div><br class="webkit-block-placeholder"></div><div>I know this email is a little hasty but I wanted to go ahead and let everyone know what I'm working on. Please grab the code from the branch and take a look. Let me know what you think.
<a href="http://dev.jquery.com/browser/branches/event_enhancements/src/event.js">http://dev.jquery.com/browser/branches/event_enhancements/src/event.js</a></div><div><br class="webkit-block-placeholder"></div><div>--</div>
<div>Brandon Aaron</div>
<div><br class="webkit-block-placeholder"></div><div>$(...).bind("ready", fn);</div><div>$(...).unbind("ready", fn);</div><div>$(...).bind("mousewheel", function(event) { console.log(event.delta
); return false; });</div><div>
</div><div>I've also gone ahead and implemented the ability to bind multiple event types with one call.</div><div><br class="webkit-block-placeholder"></div><div>$(...).bind("mouseover mouseout mouseenter mouseleave", function(event) {
console.log(event.type); });</div><div><br class="webkit-block-placeholder"></div><div>I just implemented the changes and have only done minor testing with Firebug+Firefox only. </div><div><br class="webkit-block-placeholder">
</div><div>As far as file size goes ... </div><div>Original events.js: 13,771 bytes
</div><div>New events.js: 16,823 bytes</div><div>New events.js without mousewheel: 14,814 bytes (this still includes mouseenter and mouseleave)
</div><div><br class="webkit-block-placeholder"></div><div>The hover helper method has been re-factored to use the mouseenter and mouseleave events ... which means unbinding the hover is as simple and safe as $(..).unbind('mouseenter mouseleave', fn);
</div><div><br class="webkit-block-placeholder"></div><div>To add a "special event" just extend the jQuery.event.special like so:</div><div><br class="webkit-block-placeholder"></div><div>$.extend($.event.special, {
</div><div> myspecialevent: {</div><div> setup: function() {</div><div> // do the setup</div><div> // this == element</div><div> // return false to allow bind to call addEventListener and attachEvent respectively
</div><div> },</div><div> teardown: function() {</div><div> // undo what you did in setup</div><div> // this == element</div><div> // return false to allow unbind to call removeEventListener and detachEvent respectively
</div><div> }</div><div> }</div><div>};</div><div><br class="webkit-block-placeholder"></div><div>The setup and teardown methods are only called once per an element per an event type. Similar to how the actual event is only bound once per an element per an event type. The jQuery events API does the rest (the majority) of the heavy lifting.
</div><div><br class="webkit-block-placeholder"></div><div>In my implementations I've also added a "handler" function as well as the setup and teardown functions. This handler function provides any normalization, etc needed before calling the handlers. If you take a look at the branch you'll notice that I return false on the mouseenter and mouseleave events if it is IE. This way IE can handle them natively while the other browsers will use the special event handler.
</div><div><br class="webkit-block-placeholder"></div><div>I know this email is a little hasty but I wanted to go ahead and let everyone know what I'm working on. Please grab the code from the branch and take a look. Let me know what you think.
<a href="http://dev.jquery.com/browser/branches/event_enhancements/src/event.js">http://dev.jquery.com/browser/branches/event_enhancements/src/event.js</a></div><div><br class="webkit-block-placeholder"></div><div>--</div>
<div>Brandon Aaron</div>
