Added rest of events chapter

Author: danheberden

content/jquery-fundamentals/events/event-delegation.md

@@ -0,0 +1,54 @@
+---
+chapter : events
+section : 4
+title   : Triggering Event Handlers
+attribution:  jQuery Fundamentals
+---
+## Increasing Performance with Event Delegation
+
+You'll frequently use jQuery to add new elements to the page, and when you do, you may need to bind events to those new elements — events you already bound to similar elements that were on the page originally. 
+Instead of repeating your event binding every time you add elements to the page, you can use event delegation. 
+With event delegation, you bind your event to a container element, and then when the event occurs, you look to see which contained element it occurred on. 
+If this sounds complicated, luckily jQuery makes it easy with its `$.fn.live` and `$.fn.delegate` methods.
+
+While most people discover event delegation while dealing with elements added to the page later, it has some performance benefits even if you never add more elements to the page. 
+The time required to bind event handlers to hundreds of individual elements is non-trivial; 
+if you have a large set of elements, you should consider delegating related events to a container element.
+
+<div class="note" markdown="1">
+### Note
+
+The `$.fn.live` method was introduced in jQuery 1.3, and at that time only certain event types were supported. 
+As of jQuery 1.4.2, the `$.fn.delegate` method is available, and is the preferred method.
+</div>
+
+<div class="example" markdown="1">
+Event delegation using `$.fn.delegate`
+
+    $('#myUnorderedList').delegate('li', 'click', function(e) {
+        var $myListItem = $(this);
+        // ...
+    });
+</div>
+
+<div class="example" markdown="1">
+Event delegation using `$.fn.live`
+
+    $('#myUnorderedList li').live('click', function(e) {
+        var $myListItem = $(this);
+        // ...
+    });
+</div>
+
+### Unbinding Delegated Events
+
+If you need to remove delegated events, you can't simply unbind them. 
+Instead, use `$.fn.undelegate` for events connected with `$.fn.delegate`, and `$.fn.die` for events connected with `$.fn.live`. 
+As with bind, you can optionally pass in the name of the bound function.
+
+<div class="example" markdown="1">
+Unbinding delegated events
+
+    $('#myUnorderedList').undelegate('li', 'click');
+    $('#myUnorderedList li').die('click');
+</div>

content/jquery-fundamentals/events/event-exercises.md

@@ -0,0 +1,48 @@
+---
+chapter : events
+section : 6
+title   : Excercises
+attribution:  jQuery Fundamentals
+---
+## Excercises
+
+###Create an Input Hint
+
+Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/inputHint.js` or work in Firebug. 
+Your task is to use the text of the label for the search input to create "hint" text for the search input. 
+The steps are as follows:
+
+1.	Set the value of the search input to the text of the label element
+
+2.	Add a class of "hint" to the search input
+
+3.	Remove the label element
+
+4.	Bind a focus event to the search input that removes the hint text and the "hint" class
+
+5.	Bind a blur event to the search input that restores the hint text and "hint" class if no search text was entered
+
+What other considerations might there be if you were creating this functionality for a real site?
+
+### Add Tabbed Navigation
+
+Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/tabs.js`. 
+Your task is to create tabbed navigation for the two div.module elements. 
+To accomplish this:
+
+1.	Hide all of the modules.
+
+2.	Create an unordered list element before the first module.
+
+3.	Iterate over the modules using `$.fn.each`. For each module, use the text of the h2 element as the text for a list item that you add to the unordered list element.
+
+4.	Bind a click event to the list item that:
+
+	*	Shows the related module, and hides any other modules
+
+	*	Adds a class of "current" to the clicked list item
+
+	*	Removes the class "current" from the other list item
+
+5.	Finally, show the first tab.
+

content/jquery-fundamentals/events/event-helpers.md

@@ -0,0 +1,47 @@
+---
+chapter : events
+section : 5
+title   : Event Helpers
+attribution:  jQuery Fundamentals
+---
+## Event Helpers
+
+jQuery offers two event-related helper functions that save you a few keystrokes.
+
+### `$.fn.hover`
+
+The `$.fn.hover` method lets you pass one or two functions to be run when the `mouseenter` and `mouseleave` events occur on an element. If you pass one function, it will be run for both events; if you pass two functions, the first will run for `mouseenter`, and the second will run for `mouseleave`.
+
+<div class="example" markdown="1">
+### Note
+
+Prior to jQuery 1.4, the `$.fn.hover` method required two functions.
+</div>
+
+<div class="example" markdown="1">
+The hover helper function
+
+    $('#menu li').hover(function() {
+        $(this).toggleClass('hover');
+    });
+</div>
+
+### `$.fn.toggle`
+
+The `$.fn.toggle` method is triggered by the "click" event and accepts two or more functions. 
+Each time the click event occurs, the next function in the list is called. 
+Generally, `$.fn.toggle` is used with just two functions; however, it will accept an unlimited number of functions. 
+Be careful, though: providing a long list of functions can be difficult to debug.
+
+<div class="example" markdown="1">
+The toggle helper function
+
+    $('p.expander').toggle(
+        function() {
+            $(this).prev().addClass('open');
+        },
+        function() {
+            $(this).prev().removeClass('open');
+        }
+    );
+</div>

content/jquery-fundamentals/events/inside-event-handling-function.md

@@ -0,0 +1,51 @@
+---
+chapter : events
+section : 3
+title   : Inside the Event Handling Function
+attribution:  jQuery Fundamentals
+---
+## Inside the Event Handling Function
+
+As mentioned in the overview, the event handling function receives an event object, which contains many properties and methods. 
+The event object is most commonly used to prevent the default action of the event via the preventDefault method. 
+However, the event object contains a number of other useful properties and methods, including:
+
+#### pageX, pageY
+The mouse position at the time the event occurred, relative to the top left of the page.
+
+#### type
+The type of the event (e.g. "click").
+
+#### which
+The button or key that was pressed.
+
+#### data
+Any data that was passed in when the event was bound.
+
+#### target
+The DOM element that initiated the event.
+
+#### preventDefault()
+Prevent the default action of the event (e.g. following a link).
+
+#### stopPropagation()
+Stop the event from bubbling up to other elements.
+
+In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this. 
+To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do $(this), often following this idiom:
+
+<div class="example" markdown="1">
+    var $this = $(this);
+</div>
+
+<div class="example" markdown="1">
+Preventing a link from being followed
+
+    $('a').click(function(e) {
+        var $this = $(this);
+        if ($this.attr('href').match('evil')) {
+            e.preventDefault();
+            $this.addClass('evil');
+        }
+    });
+</div>

content/jquery-fundamentals/events/triggering-event-handlers.md

@@ -0,0 +1,28 @@
+---
+chapter : events
+section : 4
+title   : Triggering Event Handlers
+attribution:  jQuery Fundamentals
+---
+## Triggering Event Handlers
+
+jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the `$.fn.trigger` method. 
+While this method has its uses, it should not be used simply to call a function that was bound as a click handler. 
+Instead, you should store the function you want to call in a variable, and pass the variable name when you do your binding. 
+Then, you can call the function itself whenever you want, without the need for `$.fn.trigger`.
+
+<div class="example">
+Triggering an event handler the right way
+
+   var foo = function(e) {
+        if (e) {
+            console.log(e);
+        } else {
+            console.log('this didn\'t come from an event!');
+    	}
+    };
+    
+    $('p').click(foo);
+    
+    foo(); // instead of $('p').trigger('click')
+</div>