1. jquery事件機制提供了兩個事件相關的幫助函數：

$.fn.hover 提供一個或者兩個傳入函數參數

// The hover helper function $( "#menu li" ).hover(function() {$( this ).toggleClass( "hover" ); });

$.fn.toggle 提供兩個及以上的傳入函數參數

// The toggle helper function $( "p.expander" ).toggle( function() {$( this ).prev().addClass( "open" ); }, function() {$( this ).prev().removeClass( "open" ); });

2. jquery對象基礎

? 2.1 jquery提供了許多便利的事件方法，如：?$.fn.click,?$.fn.focus,$.fn.blur,?$.fn.change等等，它們都是$.fn.on的快捷方式。

// Event setup using a convenience method $( "p" ).click(function() {console.log( "You clicked a paragraph!" ); });// Equivalent event setup using the `$.fn.on` method $( "p" ).on( "click", function() {console.log( "click" ); });

?2.2 對頁面新增元素的事件處理：

$( document ).ready(function(){// Sets up click behavior on all button elements with the alert class// that exist in the DOM when the instruction was executed$( "button.alert" ).on( "click", function() {console.log( "A button with the alert class was clicked!" );});// Now create a new button element with the alert class. This button// was created after the click listeners were applied above, so it// will not have the same click behavior as its peers$( "button" ).addClass( "alert" ).appendTo( document.body ); });

?2.3 深入理解事件處理函數內部：

?pageX, pageY：相對顯示頁面位置

?type ：事件類型

?which：操作的按鈕或者鍵盤的key

?data：

// Event setup using the `$.fn.on` method with data $( "input" ).on("change",{ foo: "bar" }, // associate data with event bindingfunction( eventObject ) {console.log("An input value has changed! ", eventObject.data.foo);} );

?target：目標對象

?namespace：命名空間

?timeStamp：時間戳

?preventDefault()：阻止默認事件發生

?stopPropagation()：阻止關聯事件發生

?關鍵詞：this

// Preventing a link from being followed $( "a" ).click(function( eventObject ) {var $this = $( this );if ( $this.attr( "href" ).match( /evil/ ) ) {eventObject.preventDefault();$this.addClass( "evil" );} });

?2.4 多重事件

一對多

// Multiple events, same handler $( "input" ).on("click change", // bind listeners for multiple eventsfunction() {console.log( "An input was clicked or changed!" )} );

多對多

// Binding multiple events with different handlers $( "p" ).on({"click": function() { console.log( "clicked!" ); },"mouseover": function() { console.log( "hovered!" ); } });

?2.5 命名空間事件

// Namespacing events $( "p" ).on( "click.myNamespace", function() { /* ... */ } ); $( "p" ).off( "click.myNamespace" ); $( "p" ).off( ".myNamespace" ); // unbind all events in the namespace

?2.6 ?銷毀事件監聽器

$.fn.off

// Tearing down 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 ); $( "p" ).off( "click", bar ); // foo is still bound to the click event

?2.7 只允許一次的事件$.fn.one

// Switching handlers using the `$.fn.one` method $( "p" ).one( "click", firstClick );function firstClick() {console.log( "You just clicked this for the first time!" );// Now set up the new handler for subsequent clicks;// omit this step if no further click responses are needed$( this ).click( function() { console.log( "You have clicked this before!" ); } ); }

$.fn.one也可以綁定多事件

// Using $.fn.one to bind several events $( "input[id]" ).one( "focus mouseover keydown", firstEvent);function firstEvent( eventObject ) {console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id ); }

?

?

?

?

?

?

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

總結

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

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