Bug Tracker

Modify

Ticket #12031 (assigned feature)

Opened 22 months ago

Last modified 2 weeks ago

Allow objects as event handlers

Reported by: petka_antonov@… Owned by: dmethvin
Priority: low Milestone: 1.12/2.2
Component: event Version: 1.7.2
Keywords: Cc:
Blocking: Blocked by:

Description

Doing OOP with jQuery events requires a lot of $.proxy boilerplate. the .addEventListener interface allows passing an object as a handler like so:

function SomeWidget( elem ) {
	this.elem = elem;
}

SomeWidget.prototype = {
	constructor: SomeWidget,

	renderTo: function( target ) {
		$(target).append(this.elem);
		this.elem.addEventListener( "click", this );
		this.elem.addEventListener( "mousemove", this );
	},

	mousemove: function( e ) {

	},

	click: function( e ) {

	},

	handleEvent: function( e ) {
		return this[e.type].apply( this, arguments );
	}
};

With jQuery you have to do this:

function SomeWidget( elem ) {
	this.elem = elem;
	//Each method needs to be bound to the instance. This also has overhead of creating many functions.
	this.mousemove = $.proxy( this.mousemove, this );
	this.click = $.proxy( this.click, this );
}

SomeWidget.prototype = {
	constructor: SomeWidget,

	renderTo: function( target ) {
		$(target).append(this.elem);
		$(this.elem).on( {
			click: this.click,
			mousemove: this.mousemove
		});
	},

	mousemove: function( e ) {

	},

	click: function( e ) {

	}
};

With jQuery supporting objects as event handlers, it would work like:

function SomeWidget( elem ) {
	this.elem = elem;
}

SomeWidget.prototype = {
	constructor: SomeWidget,

	renderTo: function( target ) {
		$(target).append(this.elem);
		$(this.elem).on( "click mousemove", this );
	},

	mousemove: function( e ) {

	},

	click: function( e ) {

	},

	handleEvent: function( e ) {
		return this[e.type].apply( this, arguments );
	}
};

And that's it. No $.proxy hacks, no redundant creation of functions just to retain binding.

Change History

comment:1 Changed 21 months ago by dmethvin

  • Status changed from new to open

Worth thinking about so I'll leave it open.

comment:2 Changed 21 months ago by dmethvin

  • Component changed from unfiled to event

comment:3 Changed 21 months ago by rwaldron

I'm into this

 http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

@dmethvin - if you don't mind, I'd like to prototype this one :)

Last edited 21 months ago by rwaldron (previous) (diff)

comment:4 Changed 21 months ago by rwaldron

  • Owner set to rwaldron
  • Status changed from open to assigned

comment:5 Changed 21 months ago by rwaldron

note to self...

 .on({ click: fn }) 

Has to support handling:

// delegated events
.on({ click: fn }, "div");

// data object events
.on({ click: fn }, "div", dataobject);

comment:6 Changed 19 months ago by dmethvin

  • Type changed from enhancement to feature

Bulk change from enhancement to feature.

comment:7 Changed 19 months ago by mikesherov

  • Priority changed from undecided to low

comment:8 Changed 7 months ago by gnarf

  • Owner changed from rwaldron to gnarf

comment:9 Changed 7 months ago by dmethvin

gnarf and I talked about this in Austin. It would be a very low-level public interface, ideally the current event features would be built on top of it. Essentially replace  this function so we don't go to the current jQuery dispatcher and instead use a caller-supplied dispatching object. That would provide users with low-overhead ways to handle high-frequency events like scroll or mousemove (or the upcoming pointermove) by avoiding jQuery.event.fix() for example.

comment:10 Changed 7 months ago by gibson042

A good implementation would make something like  https://github.com/jquery/jquery/pull/1367/files significantly more lightweight.

comment:11 Changed 2 months ago by dmethvin

  • Owner changed from gnarf to dmethvin

comment:12 Changed 6 weeks ago by dmethvin

  • Milestone changed from None to 1.12/2.2

comment:13 Changed 2 weeks ago by dmethvin

Additional note re #14953, can we have a way to do capturing here? As I understand the .addEventListener interface it seems like all the events in the attached object would be capturing.

comment:14 Changed 2 weeks ago by petka_antonov@…

In addEventListener the optional useCapture parameter defines whether capturing is in use regardless if you use a function or an object as a handler. The default is false so in the example all events are bubbling.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as assigned
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.