• Like
  • Save
jQuery Events
Upcoming SlideShare
Loading in...5
×
 

jQuery Events

on

  • 378 views

An explanation of the different event methods provided by jQuery.

An explanation of the different event methods provided by jQuery.

Statistics

Views

Total Views
378
Views on SlideShare
375
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

http://www.linkedin.com 2
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

jQuery Events jQuery Events Presentation Transcript

  • jQuery Events by: Charlie Choiniere
  • Event Models• There are three event models: Bubble, Capture, and W3C.• Bubbling is the only one that currently works in all browsers.• Bubbling starts at the inner most element and travels up ancestor elements until it reaches an event listener. http://www.quirksmode.org/js/events_order.html
  • Bubbling Event Order 2nd 1st
  • .bind()http://api.jquery.com/bind/
  • Usage:$(‘.foo’).bind(‘click’, function({ console.log(“OH HAI!”);});
  • click click click click click.foo .foo .foo .foo .foo click click click click click.foo .foo .foo .foo .foo click click click click click.foo .foo .foo .foo .foo click click click click click.foo .foo .foo .foo .foo click click click click click.foo .foo .foo .foo .foo
  • Notes for .bind()• Bind attaches events directly to each element that matches the selector.• Lower overhead when processing events.• Higher memory usage by attaching many events.• New DOM elements are not setup automatically and need to have .bind() applied each time one is added to the page.
  • .live()http://api.jquery.com/live/
  • Usage:$(‘.foo’).live(‘click’, function({ console.log(“OH HAI!”);});
  • document.foo .foo .foo .foo click.foo .foo .foo .foo .foo.foo .foo .foo .foo .foo.foo .foo .foo .foo .foo.foo .foo .foo .foo .foo
  • Notes for .live()• live() always attaches events to the document.• Bubbling has to travel all the way up to the top of the document for every event.• Higher processing because live needs to check if the event matches the given selector.• Elements added to the DOM dynamically will still be handled by the .live() event handler.• Don’t use live().
  • .delegate()http://api.jquery.com/delegate/
  • Usage:$(‘.container’) .delegate(‘.foo’, ‘click’, function({ console.log(“OH HAI!”); });
  • document.container .bar .bar .bar click.foo .bar .bar .bar .foo .foo .bar .bar .bar .foo .foo .bar .bar .bar .foo .foo .bar .bar .bar .foo .foo
  • Notes for .delegate()• A localized version of .live() events.• Events are attached to a containing element instead of the document.• Higher performance than live() due to the shorter path of the event Bubble.• Always use instead of .live() to avoid unnecessary bubbling overhead.
  • $(‘.wax’).on();$(‘.wax’).off(); http://api.jquery.com/on/ http://api.jquery.com/off/
  • Bind Replacement Usage:$(‘.foo’).on(‘click’, function({ console.log(“OH HAI!”);});
  • Live Replacement Usage:$(document) .on(‘click’, ‘.foo’, function({ console.log(“OH HAI!”); });
  • Delegate Replacement Usage:$(‘.container’) .on(‘click’, ‘.foo’, function({ console.log(“OH HAI!”); });
  • Notes for .on()• New in jQuery 1.7• Replacement for the 3 separate event APIs by providing a unified API for all event types.• .bind(), .live(), and .delegate will remain in jQuery for backwards compatibility• Internally .bind(), .live(), and .delegate now use the .on() API• Performance; Enhance, Enhance, Enhance.