add core styles to events section examples

Author: bobholt

page/events/event-delegation.md

@@ -36,18 +36,21 @@ We need to attach the same event handler to multiple elements.  In this example
 We can attach a direct bind click event to each `<li>` using the `.on()` method, that will alert the text inside of it by doing the following:
 ```
 // attach a directly bound event
-$('#list a').on('click', function(event) {
+$("#list a").on( "click", function(event) {
+
   event.preventDefault();
+
   console.log( $(this).text() );
+
 });
 ```
 
 While this works perfectly fine, there are drawbacks.  Consider this:
 ```
 // add a new element on to our existing list
-$('#list').append('<li><a href="http://newsite.com">Item #101</a></li>');
+$("#list").append("<li><a href="http://newsite.com">Item #101</a></li>");
 ```
-If we were to click our newly added item, nothing would happen.  This is because of the directly bound event that we attached previously.  Direct events are only attached to elements at the time we called the `.on()` method for our existing collection of `<a>`'s, that is only the `<a>`'s that were found when we call `$('#list a')`
+If we were to click our newly added item, nothing would happen.  This is because of the directly bound event that we attached previously.  Direct events are only attached to elements at the time we called the `.on()` method for our existing collection of `<a>`"s, that is only the `<a>`"s that were found when we call `$()`
 
 ## Event Propagation
 Understanding how events propagate is an important factor in being able to leverage Event Delegation.  Any time an anchor tags is clicked, a *click* event is fired for the:
@@ -65,30 +68,40 @@ Anytime one of these links is clicked you can think of it as if you were clickin
 Since we know how events bubble we can created a delegated event that listens for a specific event to happen on our element
 ```
 // attach a delegated event
-$('#list').on('click', 'a', function(event){
+$("#list").on("click", "a", function(event) {
+
   event.preventDefault();
+
   console.log( $(this).text() );
+
 });
 ```
-Notice for the second parameter to the `.on()` method we are telling it which selector to listen for.  Now when a *click* event is triggered on our `<ul>`, our delegated event will check to see if the triggering element matches our selector (`'a'`).  If it does, our anonymous function will execute. We have now attached a single *click* event listener to our `<ul>` instead of an unknown number of directly bound events on our `<a>`'s.
+Notice for the second parameter to the `.on()` method we are telling it which selector to listen for.  Now when a *click* event is triggered on our `<ul>`, our delegated event will check to see if the triggering element matches our selector (`"a"`).  If it does, our anonymous function will execute. We have now attached a single *click* event listener to our `<ul>` instead of an unknown number of directly bound events on our `<a>`"s.
 
 Now lets say that whenever a link is clicked we want to check and see if the `href` attribute starts with "http" and if it does we want to set the `target` attribute to `_blank`.
 ```
 // attach a delegated event
-$('#list').on('click', 'a', function(event){
-  var $elem = $(this);
-  if( $elem.is('[href^=http]') ){
-   $elem.attr('target', '_blank');
+$("#list").on( "click", "a", function(event) {
+
+  var $elem = $( this );
+
+  if( $elem.is("[href^=http]") ) {
+
+   $elem.attr( "target", "_blank" );
+
   }
+
 });
 ```
-This simply passes the `.is()` method a selector to see if the element's `href` attributes starts with "http".  Also we have removed the `event.preventDefault();` statement, this is because we want the default action to happen (which is to following the `href`)
+This simply passes the `.is()` method a selector to see if the element"s `href` attributes starts with "http".  Also we have removed the `event.preventDefault();` statement, this is because we want the default action to happen (which is to following the `href`)
 
 We can actually take this a step further and make our code simpiler and more concise by allowing the selector argument to `.on()` do our logic for us.
 ```
 // attach a delegated event with a more refined selector
-$('#list').on('click', 'a[href^=http]', function(event){
-  $(this).attr('target', '_blank');
+$("#list").on( "click", "a[href^=http]", function(event) {
+
+  $( this ).attr( "target", "_blank" );
+
 });
 ```
 

page/events/event-exercises.md

@@ -1,5 +1,5 @@
 ---
-title   : Exercises
+title: Exercises
 level: beginner
 source: http://jqfundamentals.com/legacy
 attribution: 

page/events/event-extensions.md

@@ -1,6 +1,6 @@
 ---
-title   : jQuery Event Extensions
-level: advanced
+title: jQuery Event Extensions
+level: beginner
 ---
 jQuery offers several ways to extend its event system to provide custom functionality when events are attached to elements. Internally in jQuery, these extensions are primarily used to ensure that standard events such as `submit` and `change` behave consistently across browsers. However, they can also be used to define new events with custom behavior.
 
@@ -58,23 +58,35 @@ Since fixHooks are an advanced feature and rarely used externally, we have not a
 
 ```
 if ( jQuery.event.fixHooks.drop ) {
+
   throw new Error("Someone else took the jQuery.event.fixHooks.drop hook!");
+
 }
+
 jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
 ```
 
 When there are known cases of different plugins wanting to attach to the drop hook, this solution might be more appropriate:
 
 ```
 var existingHook = jQuery.event.fixHooks.drop;
+
 if ( !existingHook ) {
+
   jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
+
 } else {
+
   if ( existingHook.props ) {
+
     existingHook.props.push( "dataTransfer" );
+
   } else {
+
     existingHook.props = [ "dataTransfer" ];
+
   }
+
 }
 ```
 
@@ -102,24 +114,33 @@ jQuery.event.special.pushy = {
 
 When these properties are defined, the following behavior occurs in the jQuery event system:
 
-*               Event handlers for the "pushy" event are actually attached to "click" -- both directly bound and delegated events.
-*               Special event hooks for "click" are called if they exist, *except* the `handle` hook for "pushy" is called when an event is delivered if one exists.
-*               Event handlers for "pushy" must be removed using the "pushy" event name, and are unaffected if "click" events are removed from the same elements.
-
+* Event handlers for the "pushy" event are actually attached to "click" -- both directly bound and delegated events.
+* Special event hooks for "click" are called if they exist, *except* the `handle` hook for "pushy" is called when an event is delivered if one exists.
+* Event handlers for "pushy" must be removed using the "pushy" event name, and are unaffected if "click" events are removed from the same elements.
 
 So given the special event above, this code shows that a pushy isn't removed by removing clicks. That might be an effective way to defend against an ill-behaved plugin that didn't namespace its removal of click events, for example:
 
 ```
 var $p = $("p");
-$p.on("click", function( e ) {
-  $("body").append("I am a " + e.type + "!"));
+
+$p.on( "click", function( e ) {
+
+  $("body").append( "I am a " + e.type + "!" ));
+
 });
-$p.on("pushy", function( e ) {
-  $("body").append("I am pushy but still a " + e.type + "!");
+
+$p.on( "pushy", function( e ) {
+
+  $("body").append( "I am pushy but still a " + e.type + "!" );
+
 });
+
 $p.trigger("click"); // triggers both handlers
+
 $p.off("click");
+
 $p.trigger("click"); // still triggers "pushy"
+
 $p.off("pushy");
 ```
 
@@ -130,7 +151,7 @@ These two properties are often used in conjunction with a `handle` hook function
 Many of the special event hook functions below are passed a `handleObj` object that provides more information about the event, how it was attached, and its current state. This object and its contents should be treated as read-only data, and only the properties below are documented for use by special event handlers. For the discussion below, assume an event is attached with this code:
 
 ```
-$(".dialog").on("click.myPlugin", "button", {mydata: 42}, myHandler);
+$(".dialog").on( "click.myPlugin", "button", {mydata: 42}, myHandler );
 ```
 
 type: String
@@ -199,23 +220,36 @@ jQuery.event.special.multiclick = {
   delegateType: "click",
   bindType: "click",
   handle: function( event ) {
-    var handleObj = event.handleObj,
-    targetData = jQuery.data( event.target ),
-    ret;
+
+    var handleObj = event.handleObj;
+
+    var targetData = jQuery.data( event.target );
+
+    var ret = null;
 
     // If a multiple of the click count, run the handler
     targetData.clicks = ( targetData.clicks || 0 ) + 1;
+
     if ( targetData.clicks % event.data === 0 ) {
+
       event.type = handleObj.origType;
+
       ret = handleObj.handler.apply( this, arguments );
+
       event.type = handleObj.type;
+
       return ret;
+
     }
+
   }
+
 };
 
 // Sample usage
-$("p").on("multiclick", { clicks: 3 }, function(e){
+$("p").on( "multiclick", {clicks: 3}, function(e) {
+
   alert("clicked 3 times");
+
 });
 ```

page/events/event-helpers.md

@@ -1,5 +1,5 @@
 ---
-title   : Event Helpers
+title: Event Helpers
 level: beginner
 source: http://jqfundamentals.com/legacy
 attribution: 
@@ -20,8 +20,10 @@ Prior to jQuery 1.4, the `$.fn.hover` method required two functions.
 
 ```
 // The hover helper function
-$('#menu li').hover(function() {
-  $(this).toggleClass('hover');
+$("#menu li").hover(function() {
+
+  $( this ).toggleClass("hover");
+
 });
 ```
 
@@ -35,12 +37,19 @@ providing a long list of functions can be difficult to debug.
 
 ```
 // The toggle helper function
-    $('p.expander').toggle(
-        function() {
-            $(this).prev().addClass('open');
-        },
-        function() {
-            $(this).prev().removeClass('open');
-        }
-    );
+$("p.expander").toggle(
+
+    function() {
+
+        $( this ).prev().addClass("open");
+
+    },
+
+    function() {
+
+        $( this ).prev().removeClass("open");
+
+    }
+
+);
 ```