jquery学习手记（10）事件简介

 1. 使用jquery监听的方法有许多种：

// 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." );});

2. 事件对象

// 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 });

 3.事件处理

jquery的.on()方法提供了一些有用的特点：

 3.1 一对一的事件绑定

// 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" );});

 3.2 一对多的事件绑定

// 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" );});

 3.3 多对多的事件绑定

$( "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" );    }});

 3.4  事件对象

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

3.5 向事件处理中传入数据

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

3.6 事件代理

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

3.7 只运行一次的事件

// 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!" );    });});

3.8 关闭事件

// Unbinding a particular click handler, using a reference to the functionvar 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 );