Comments on: ‘Events’ interface for jQuery

By: Mahbub

Mahbub — Sat, 09 May 2009 04:51:08 +0000

Nice Idea. I too sometimes felt that there should be a separate scope for event related routines in jQuery. I think i’ll use it next.
Nice work James, keep changing the world!!

By: Hal Helms

Hal Helms — Sun, 05 Apr 2009 03:13:33 +0000

Nice work, James. Thanks.

By: James

James — Wed, 01 Apr 2009 20:32:55 +0000

I like the tip you came up with here and I’ve found your blog to be a great read.

ExtJs uses a similar way to what you’ve suggested to add multiple event handlers.

var el = Ext.get("my-dom-el");
 
el.on({
    'click' : {
        fn: this.onClick,
        scope: this,
        delay: 100
    },
    'mouseover' : {
        fn: this.onMouseOver,
        scope: this
    },
    'mouseout' : {
        fn: this.onMouseOut,
        scope: this
    }
});

By: Scott

Scott — Wed, 01 Apr 2009 18:04:13 +0000

You can go to this nice extreme too, because we know that jQuery loves overloading methods 🙂

jQuery.fn._bind = jQuery.fn.bind;
jQuery.fn.bind = function(events) {
  if (typeof events == 'string')
    return this._bind.apply(this, arguments);
  for (var type in events)
    this._bind(type, events[type]);
  return this;
};

This will let you use the bind() method as you wanted while also still being able to use it the original way.

By: Ivan

Ivan — Wed, 01 Apr 2009 14:53:00 +0000

it’s a cute approach. i wouldn’t say is a huge win over the standard way of doing it. i bet you add your events enough times and you’ll go back to doing it the old way.

By: Mike

Mike — Wed, 01 Apr 2009 03:03:35 +0000

Nice to find someone else dislikes this ugly code that jQuery -unintentionally- making people get used to.

By: Julio Cesar Ody

Julio Cesar Ody — Tue, 31 Mar 2009 22:36:05 +0000

Yeah, all form of abuse considered harmful 🙂 though it strikes me that in this case, it’s simply an escape to the element’s scope in order to declare a few jQuery events. Which makes it not so bad IMO.

Thanks for the link though.

By: James

James — Tue, 31 Mar 2009 22:31:00 +0000

@Rick, while I agree I don't see this as a barrier that can't be overcome by continuing with jQuery. I've tried MooTools but I don't like it since it extends native DOM properties and the prototypes of native datatypes - something which is generally not a good idea. @Dan, exactly. The problem with jQuery's chaining is that it looks awful if you don't indent, and when you do indent it can create confusion and, as you said, invalidation... @Julio, Nice solution, thanks. Although, note that it's generally not a good idea to use the with statement.

By: Julio Cesar Ody

Julio Cesar Ody — Tue, 31 Mar 2009 22:12:34 +0000

with( $(elem) ) {
 
  click( function() { ... } );
  hover( function() { ... } );
}

And so on, and so forth.

By: Dan

Dan — Tue, 31 Mar 2009 20:23:28 +0000

Neat idea. Will also stop JSlint complaining that its ‘ambiguous whether these lines are part of the same statement’, which it would do in the first example.