event-delegation

I am attempting to rewrite a snippet of code using event delegation (in the hopes that it will stop conflict with another snippiet of js). but I've broken the code Original //to scale up on hover var current_h = null; var current_w = null; $('.piccon').hover( function(){ current_h = $(this, 'img')[0].height; current_w = $(this, 'img')[0].width; $(this).stop(true, false).animate({width: (current_w * 2.7), height: (current_h * 2.7)}, 900); }, function(){ $(this).stop(true, false).animate({width: current_w + 'px', height: current_h + 'px'}, 400); } ); //using event delegation //to scale up on

I have a visual list of items like this: http://jsfiddle.net/viatropos/XCe3T/1/ In the real app, I'm only loading 200 total items. But the problem is the click event takes almost one second to call the handler, even with just 200 items. The mouseover event callback executes immediately no matter how many items are in the list. My question is, shouldn't the delegate method be just as fast no matter how many elements are on the page? All I am doing is this: $("body").delegate("a", "click", function(event) { console.log($(event.target).get(0)); return false; } If you go to that jsfiddle example

The old event management in which each handler for specific actions was directly attached to the target element is becoming outdated, since considerations about performance and memory saving started spreading in the developers community. Event delegation implementations had an acceleration since jQuery updated the old fashioned .bind() and .live() methods with the new .on() method to allow delegation. This determines a change in some seasoned approaches, where to use event delegation a rework is necessary. I am trying to work out some best practice while keeping the coding style of my library,

I've attached delegated event handlers to a number of elements on the page using a single selector. As the events are triggered for individual elements, I'd like to turn off only that element's event handler based on some conditional logic . That means I won't necessarily want to disable the event on the very first click . But I can't figure out how to do it without turning off all of them. HTML: <button>One</button> <button>Two</button> <button>Three</button> JS: $(document).on('click', 'button', function(ev) { // doesn't work because argument needs to be a string $(document).off('click', $

In JavaScript i used to use event delegation like this : someDiv.addEventListener('click', function(evt){ if(evt.target.id == "#someChild"){ // Do something.. } else if(evt.target.id == "#anotherChild"){ // Do something else.. } }, false); What's the equivalent of this in jQuery? i know about .on() but how to use it in event delegation ? i mean is this how is it done : someDiv.on('click, '#someChild, #anotherChild", function(evt){ if($(this).is("#someChild")){ // Do something.. } else if($(this).is("#anotherChild")){ // Do something else .. } }); But wouldn't it be just the same as in vanilla

What is the native implementation for event delegation on dynamically created dom elements? I tried looking at the jquery source but I cant follow the .on method. Note: Currently I attach the event handlers after the dom elements are created, which seems pretty standard but I like the way jquery .on handles dynamically created elements events with this syntax $( document ).on( "click", ".selector", handler ); What happens is basically this: // $(document).on("click", <selector>, handler) document.addEventListener("click", function(e) { for (var target=e.target; target && target!=this; target

I'm trying to do event delegation in vanilla JS. I have a button inside a container like this <div id="quiz"> <button id="game-again" class="game-again"><span class="icon-spinner icon"></span><span>Go again</span></button> </div> And following David Walsh's nice instructions I'm adding an event handler to an ancestor of the button like so: this.container.addEventListener('click', function(e){ if (e.target && e.target.id == 'game-again') { e.stopPropagation(); self.publish('primo:evento'); } }); Where this.container is the #quiz element. This works half the time, but the rest of the time the