Converted code examples for all events articles to github markdown

Author: bentonam

page/events/event-delegation.md

@@ -25,29 +25,31 @@ 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`
+```
+//Event delegation using `$.fn.delegate`
 
     $('#myUnorderedList').delegate('li', 'click', function(e) {
         var $myListItem = $(this);
         // ...
     });
-</div>
+```
 
-<javascript caption="Event delegation using `$.fn.live`">
+```
+//Event delegation using `$.fn.live`
     $('#myUnorderedList li').live('click', function(e) {
         var $myListItem = $(this);
         // ...
     });
-</javascript>
+```
 
 ### 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.<javascript caption="Unbinding delegated events">
+in the name of the bound function.
+```
+//Unbinding delegated events
     $('#myUnorderedList').undelegate('li', 'click');
-    $('#myUnorderedList li').die('click');</javascript>
-<div class="example" markdown="1">
-</div>
+    $('#myUnorderedList li').die('click');
+```

page/events/event-extensions.md

@@ -51,20 +51,23 @@ Note that for all events, the browser's native event object is available in `eve
 
 For example, to set a hook for the "drop" event that copies the "dataTransfer" property, assign an object to jQuery.event.fixHooks.drop:
 
-<javascript>jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
-</javascript>
+```
+jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
+```
 
 Since fixHooks are an advanced feature and rarely used externally, we have not added extra code and interfaces to deal with conflict resolution. If there is a chance that some other code may be assigning fixHooks to the same events, the code should check for an existing hook and take appropriate measures. A simple solution might look like this:
 
-<javascript>if ( jQuery.event.fixHooks.drop ) {
+```
+if ( jQuery.event.fixHooks.drop ) {
   throw new Error("Someone else took the jQuery.event.fixHooks.drop hook!");
 }
 jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
-</javascript>
+```
 
 When there are known cases of different plugins wanting to attach to the drop hook, this solution might be more appropriate:
 
-<javascript>var existingHook = jQuery.event.fixHooks.drop;
+```
+var existingHook = jQuery.event.fixHooks.drop;
 if ( !existingHook ) {
   jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
 } else {
@@ -74,7 +77,7 @@ if ( !existingHook ) {
     existingHook.props = [ "dataTransfer" ];
   }
 }
-</javascript>
+```
 
 ### Special event hooks
 
@@ -91,11 +94,11 @@ When defined, these string properties specify that a special event should be han
 
 The behavior of these properties is easiest to see with an example. Assume a special event defined as follows:
 
-<javascript>jQuery.event.special.pushy = {
+```jQuery.event.special.pushy = {
   bindType: "click",
   delegateType: "click"
 };
-</javascript>
+```
 
 When these properties are defined, the following behavior occurs in the jQuery event system:
 
@@ -106,7 +109,8 @@ When these properties are defined, the following behavior occurs in the jQuery e
 
 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:
 
-<javascript>var $p = $("p");
+```
+var $p = $("p");
 $p.on("click", function( e ) {
     $("body").append("I am a " + e.type + "!"));
 });
@@ -117,16 +121,17 @@ $p.trigger("click"); // triggers both handlers
 $p.off("click");
 $p.trigger("click"); // still triggers "pushy"
 $p.off("pushy");
-</javascript>
+```
 
 These two properties are often used in conjunction with a `handle` hook function; the hook might, for example, change the event name from "click" to "pushy" before calling event handlers. See below for an example.
 
 #### The handleObj object
 
 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:
 
-<javascript>$(".dialog").on("click.myPlugin", "button", {mydata: 42}, myHandler);
-</javascript>
+```
+$(".dialog").on("click.myPlugin", "button", {mydata: 42}, myHandler);
+```
 
 type: String
 :               The type of event, such as `"click"`. When special event mapping is used via bindType or delegateType, this will be the mapped type.
@@ -189,7 +194,8 @@ This `multiclick` special event maps itself into a standard click event, but use
 
 The hook stores the current click count in the data object, so multiclick handlers on different elements don't interfere with each other. It changes the event type to the original "multiclick" type before calling the handler and restores it to the mapped "click" type before returning:
 
-<javascript>jQuery.event.special.multiclick = {
+```
+jQuery.event.special.multiclick = {
   delegateType: "click",
   bindType: "click",
   handle: function( event ) {
@@ -212,4 +218,4 @@ The hook stores the current click count in the data object, so multiclick handle
 $("p").on("multiclick", { clicks: 3 }, function(e){
   alert("clicked 3 times");
 });
-</javascript>
+```

page/events/event-helpers.md

@@ -15,11 +15,12 @@ will run for `mouseenter`, and the second will run for `mouseleave`.
 Prior to jQuery 1.4, the `$.fn.hover` method required two functions.
 </div>
 
-<javascript caption="The hover helper function">
+```
+//The hover helper function
     $('#menu li').hover(function() {
         $(this).toggleClass('hover');
     });
-</javascript>
+```
 
 ### `$.fn.toggle`
 
@@ -29,8 +30,8 @@ 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.
 
-<javascript caption="The toggle helper function">
-
+```
+//The toggle helper function
     $('p.expander').toggle(
         function() {
             $(this).prev().addClass('open');
@@ -39,4 +40,4 @@ providing a long list of functions can be difficult to debug.
             $(this).prev().removeClass('open');
         }
     );
-</javascript>
+```

page/events/events-to-elements.md

@@ -10,43 +10,45 @@ function to multiple events, when you want to provide data to the event hander,
 when you are working with custom events, or when you want to pass an object of
 multiple events and handlers.
 
-<javascript caption="Event binding using a convenience method">
-    $('p').click(function() {
-        console.log('click');
-     });
-</javascript>
-
-<javascript caption="Event biding using the `$.fn.bind` method">
-
-    $('p').bind('click', function() {
-        console.log('click');
-    });
-</javascript>
-
-<javascript caption="Event binding using the `$.fn.bind` method with data">
-    $('input').bind(
-        'click change',  // bind to multiple events
-        { foo : 'bar' }, // pass in data
-
-        function(eventObject) {
-            console.log(eventObject.type, eventObject.data);
-            // logs event type, then { foo : 'bar' }
-        }
-    );
-</javascript>
+```
+//Event binding using a convenience method
+$('p').click(function() {
+  console.log('click');
+});
+```
+
+```
+//Event biding using the `$.fn.bind` method
+$('p').bind('click', function() {
+  console.log('click');
+});
+```
+
+```
+//Event binding using the `$.fn.bind` method with data
+$('input').bind(
+  'click change',  // bind to multiple events
+  { foo : 'bar' }, // pass in data
+  function(eventObject) {
+    console.log(eventObject.type, eventObject.data);
+    // logs event type, then { foo : 'bar' }
+  }
+);
+```
 
 ### Connecting Events to Run Only Once
 
 Sometimes you need a particular handler to run only once — after that, you may
 want no handler to run, or you may want a different handler to run.  jQuery
 provides the `$.fn.one` method for this purpose.
 
-<javsacript caption="Switching handlers using the `$.fn.one` method">
-    $('p').one('click', function() {
-        console.log('You just clicked this for the first time!');
-        $(this).click(function() { console.log('You have clicked this before!'); });
-    });
-</javsacript>
+```
+//Switching handlers using the `$.fn.one` method
+$('p').one('click', function() {
+  console.log('You just clicked this for the first time!');
+  $(this).click(function() { console.log('You have clicked this before!'); });
+});
+```
 
 The `$.fn.one` method is especially useful if you need to do some complicated
 setup the first time an element is clicked, but not subsequent times.
@@ -58,29 +60,32 @@ the event type to unbind.  If you attached a named function to the event, then
 you can isolate the unbinding to that named function by passing it as the
 second argument.
 
-<javascript caption="Unbinding all click handlers on a selection">
-    $('p').unbind('click');
-</javascript>
+```
+//Unbinding all click handlers on a selection
+$('p').unbind('click');
+```
 
-<javascript caption="Unbinding a particular click handler, using a reference to the function">
-    var foo = function() { console.log('foo'); };
-    var bar = function() { console.log('bar'); };
+```
+//Unbinding a particular click handler, using a reference to the function
+var foo = function() { console.log('foo'); };
+var bar = function() { console.log('bar'); };
 
-    $('p').bind('click', foo).bind('click', bar);
-    $('p').unbind('click', bar); // foo is still bound to the click event
-</javascript>
+$('p').bind('click', foo).bind('click', bar);
+$('p').unbind('click', bar); // foo is still bound to the click event
+```
 
 ### Namespacing Events
 
 For complex applications and for plugins you share with others, it can be
 useful to namespace your events so you don't unintentionally disconnect events
 that you didn't or couldn't know about.
 
-<javascript caption="Namespacing events">
-    $('p').bind('click.myNamespace', function() { /* ... */ });
-    $('p').unbind('click.myNamespace');
-    $('p').unbind('.myNamespace'); // unbind all events in the namespace
-</javascript>
+```
+//Namespacing events
+$('p').bind('click.myNamespace', function() { /* ... */ });
+$('p').unbind('click.myNamespace');
+$('p').unbind('.myNamespace'); // unbind all events in the namespace
+```
 
 ### Binding Multiple Events
 
@@ -89,12 +94,13 @@ having a different function for handing the event.  In these cases you can pass
 an object into `$.fn.bind` with one or more key/value pairs, with the key being
 the event name and the value being the function to handle the event.
 
-<javascript caption="Binding Multiple Events">
-    $('p').bind({
-      'click': function() { console.log('clicked!'); },
-      'mouseover': function() { console.log('hovered!'); }
-    });
-</javascript>
+```
+//Binding Multiple Events
+$('p').bind({
+  'click': function() { console.log('clicked!'); },
+  'mouseover': function() { console.log('hovered!'); }
+});
+```
 
 <div class="note" markdown="1">
 The option to pass an object of multiple events and handlers to `$.fn.bind` was

page/events/inside-event-handling-function.md

@@ -41,16 +41,17 @@ 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:
 
-<javascript>
+```
     var $this = $(this);
-</javascript>
+```
 
-<javascript caption="Preventing a link from being followed">
+```
+//Preventing a link from being followed
     $('a').click(function(e) {
         var $this = $(this);
         if ($this.attr('href').match('evil')) {
             e.preventDefault();
             $this.addClass('evil');
         }
     });
-</javascript>
+```