?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 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 );

?

?

?

轉載于:https://www.cnblogs.com/davidwang456/archive/2013/05/12/3073803.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jquery学习手记（10）事件简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。