Clarification needed in Event Delegation

1 
http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_event-delegation     

In the above link, to explain event delegation they stated 100 listeners need to be created for each delete button. But i can achieve this in jQuery by assigning same class name to all delete button and make one listener to handle this like,

$('.class-name').on('click',function(){
   //Doing needed stuff
});

Are the statements in the tutorial correct?
2

Doing:

$('.class-name').on('click'....

In jquery will add event listeners to every DOM node with the class-name class, so if you had 50 of those nodes you would have 50 event listeners. Event delegation in jQuery looks like this:

$('#parent-node').on('click', '.class-name', function ()....

This will add a single event listener to #parent-node which will capture all click events and then match the selector (the second argument to the on function).

Ember uses event delegation behind the scenes but to an even greater extent (as far as I understand). It will delegate all events from the body node and match them to the relevant view. With ember you only end up with one event handler for each type of event.

1 Like