// The many ways to bind events with jQuery
// Attach an event handler directly to the button using jQuery's
// shorthand `click` method.
$( "#helloBtn" ).click(function( event ) {alert( "Hello." );
});// Attach an event handler directly the to button using jQuery's
// `bind` method, passing it an event string of `click`
$( "#helloBtn" ).bind( "click", function( event ) {alert( "Hello." );
});// As of jQuery 1.7, attach an event handler directly to the button
// using jQuery's `on` method.
$( "#helloBtn" ).on( "click", function( event ) {alert( "Hello." );
});// As of jQuery 1.7, attach an event handler to the `body` element that
// is listening for clicks, and will respond whenever *any* button is
// clicked on the page.
$( "body" ).on({click: function( event ) {alert( "Hello." );}
}, "button" );// An alternative to the previous example, using slightly different syntax.
$( "body" ).on( "click", "button", function( event ) {alert( "Hello." );
});

// Preventing a default action from occurring and stopping the event bubbling
$( "form" ).on( "submit", function( event ) {// Prevent the form's default submission.
    event.preventDefault();// Prevent event from bubbling up DOM tree, prohibiting delegation
    event.stopPropagation();// Make an AJAX request to submit the form data

});

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.
$( "p" ).on( "click", function() {console.log( "<p> was clicked" );
});

// When a user focuses on or changes any input element, we expect a console message
// bind to multiple events
$( "div" ).on( "mouseenter mouseleave", function() {console.log( "mouse hovered over or left a div" );
});

$( "div" ).on({mouseenter: function() {console.log( "hovered over a div" );},mouseleave: function() {console.log( "mouse left a div" );},click: function() {console.log( "clicked on a div" );}
});

$( "div" ).on( "click", function( event ) {console.log( "event object:" );console.dir( event );
});

$( "p" ).on( "click", {foo: "bar"
}, function( event ) {console.log( "event data: " + event.data.foo + " (should be 'bar')" );
});

$( "ul" ).on( "click", "li", function() {console.log( "Something in a <ul> was clicked, and we detected that it was an <li> element." );
});

// Switching handlers using the `.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!" );});
});

// Unbinding a particular click handler, using a reference to the function
var foo = function() {console.log( "foo" );
};var bar = function() {console.log( "bar" );
};$( "p" ).on( "click", foo ).on( "click", bar );// foo will stay bound to the click event
$( "p" ).off( "click", bar );