element has the event listener attached. 6. The event listener first detects the triggering event. The bubbling event is 'click' and the listener has 'click', it is a pass. 7. The listener checks tries to match the second parameter ('a') to each item in the bubble chain. As the last item in the chain is an 'a' this matches the filter and this is a pass too. 8. The code in third parameter is run using the matched item as it's this. If the function does not include a call to stopPropagation(), the event will continue propagating upwards towards the root (document). Note: If a suitable non-changing ancestor is not available/convenient, you should use document. As a habit do not use 'body' for the following reasons: body has a bug, to do with styling, that can mean mouse events do not bubble to it. This is browser dependant and can happen when the calculated body height is 0 (e.g. when all child elements have absolute positions). Mouse events always bubble to document. document always exists to your script, so you can attach delegated handlers to document outside of a DOM ready handler and be certain they will still work. Section 6.2: Attach and Detach Event Handlers Attach an Event Handler Since version 1.7 jQuery has the event API .on(). This way any standard javascript event or custom event can be bound on the currently selected jQuery element. There are shortcuts such as .click(), but .on() gives you more options. HTML bar jQuery $( "#foo" ).on( "click", function() { console.log( $( this ).text() ); //bar GoalKicker.com – jQuery® Notes for Professionals 23 }); Detach an Event Handler Naturally you have the possibility to detach events from your jQuery objects too. You do so by using .off( events [, selector ] [, handler ] ). HTML hello jQuery $('#hello').on('click', function(){ console.log('hello world!'); $(this).off(); }); When clicking the button $(this) will refer to the current jQuery object and will remove all attached event handlers from it. You can also specify which event handler should be removed. jQuery $('#hello').on('click', function(){ console.log('hello world!'); $(this).off('click'); }); $('#hello').on('mouseenter', function(){ console.log('you are about to click'); }); In this case the mouseenter event will still function after clicking. Section 6.3: Switching specific events on and o via jQuery. (Named Listeners) Sometimes you want to switch off all previously registered listeners. //Adding a normal click handler $(document).on("click",function(){ console.log("Document Clicked 1") }); //Adding another click handler $(document).on("click",function(){ console.log("Document Clicked 2") }); //Removing all registered handlers. $(document).off("click") An issue with this method is that ALL listeners binded on document by other plugins etc would also be removed. More often than not, we want to detach all listeners attached only by us. To achieve this, we can bind named listeners as, //Add named event listener. GoalKicker.com – jQuery® Notes for Professionals 24 $(document).on("click.mymodule",function(){ console.log("Document Clicked 1") }); $(document).on("click.mymodule",function(){ console.log("Document Clicked 2") }); //Remove named event listener. $(document).off("click.mymodule"); This ensures that any other click listener is not inadvertently modified. Section 6.4: originalEvent Sometimes there will be properties that aren't available in jQuery event. To access the underlying properties use Event.originalEvent Get Scroll Direction $(document).on("wheel",function(e){ console.log(e.originalEvent.deltaY) // Returns a value between -100 and 100 depending on the direction you are scrolling }) Section 6.5: Events for repeating elements without using ID's Problem There is a series of repeating elements in page that you need to know which one an event occurred on to do something with that specific instance. Solution Give all common elements a common class Apply event listener to a class. this inside event handler is the matching selector element the event occurred on Traverse to outer most repeating container for that instance by starting at this Use find() within that container to isolate other elements specific to that instance HTML

Fred

Delete

Wilma

Delete

jQuery $(function() { $('.delete').on('click', function() { GoalKicker.com – jQuery® Notes for Professionals 25 // "this" is element event occurred on var $btn = $(this); // traverse to wrapper container var $itemWrap = $btn.closest('.item-wrapper'); // look within wrapper to get person for this button instance var person = $itemWrap.find('.person').text(); // send delete to server and remove from page on success of ajax $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) { $itemWrap.remove() }).fail(function() { alert('Ooops, not deleted at server'); }); }); }); Section 6.6: Document Loading Event .load() If you want your script to wait until a certain resource was loaded, such as an image or a PDF you can use .load(), which is a shortcut for shortcut for .on( "load", handler). HTML jQuery $( "#image" ).load(function() { // run script }); GoalKicker.com – jQuery® Notes for Professionals 26 Chapter 7: DOM Manipulation Section 7.1: Creating DOM elements The jQuery function (usually aliased as $) can be used both to select elements and to create new elements. var myLink = $('

This is a small paragraph with a link inside.

• Mark
• Anna
• Paul

GoalKicker.com – jQuery® Notes for Professionals 31
• Mark
• Anna
• Paul

• Zero
• One
• Two
• Three

• Home
• Blog
• About

This is a nice

I like

• List item 1
• List item 2
• List item 3

Animation is complete!

Select all Group1 value 1 Group1 value 2 Group1 value 3

Select all Group2 value 1 Group2 value 2 Group2 value 3