jQuery-events(3)

jQuery- Event(3)- Event Handler Attachment 關於jQuery的事件之事件處理 Edit by win 2012.7.8
參考來源 :http://api.jquery.com/category/

Event Handler Attachment的方法有…. (後頁不按照順序介紹) .bind() .delegate() .die() .live() .off() .on()
.one() jQuery.proxy() .trigger() .triggerHandler() .unbind() .undelegate()

事件處理 • jQuery有以下方法來連結事件: Event方法名稱功能 bind() 綁定事件 unbind() 刪除綁定事件 one()
用法與bind()相同，但事件函式只能執行一次 trigger() Trigger為觸發的意思，此方法用來觸發預定事件或是自訂事件 triggerHandler() 方法與trigger()類似，只想觸發指定事件類型上所有綁定的處理函數，但不執行預設事件的方法。 live() 連結事件處理到選取元素上 die() 移除元素的事件處理函式的Live連結

bind() -綁定事件 將事件處理函式連結到元素的事件上  .bind( eventType [, eventData], handler(eventObject) )
eventType : 包含一個或多個事件種類名稱，如click或是submit，或者是自訂的事件名稱 eventData : 要傳遞給事件的資料集 handler(eventObject) : 一個去執行每一次被觸發的事件函數(在事件觸發時所實行的函式)  .bind( eventType [, eventData], preventBubble ) preventBubble: 設定第三個參數為false，則用來避免預設行為的發生，停止事件往上傳遞(stops the event from bubbling(反升).) ，預設值為true  .bind( events )

 使用.bind()的基本方式: $('#foo').bind('click', function() { alert('User clicked on "foo."'); });
 一次使用多種事件的方式 (中間以空白間隔開) Multiple event types can be bound at once by including each one separated by a space $(‘#foo’).bind(‘mouseenter mouseleave’, function() { $(this).toggleClass('entered'); });

 pass some extra data before the event handler 
在綁定過程可以將參數值以物件形式進行傳遞，之後在處理過程中可以以event.data屬性值交給處理函式。  如上，P元素以.bind()方法以物件形式傳遞了一個foo等於bar 的參數值。  在hander的function 中以alert的方式，用event.data的屬性將 foo顯示 function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)

改自官方範例: 顯示滑鼠正在點擊的x與y座標 <!DOCTYPE html> <html> <head> <style> p { background:yellow;
font-weight:bold; cursor:pointer; p.over { background: #ccc; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>點按這裡或是雙擊這裡</p> <span> </span> <script> $('p').bind('click',function(event){ var str = event.pageX + ","+event.pageY; $('span').text("顯示點擊的x座標與y座標 : "+str); }); </script> </body> </html>

unbind() -移除綁定事件  以上方法會移除所有#foo的綁定事件 with no arguments, .unbind() removes all
handlers attached to the elements  以上移除#foo的click $('#foo').unbind(); $('#foo').unbind('click');

one() 只執行一次處理事件的函式 .one( events [, data], handler(eventObject) ) Event: 事件種類的名稱，如click
,submit或者是你自訂的事件名稱 Data : 傳遞給事件的資料急 Handler(eventObject) : 事件被觸發時的函式

範例 : 按下按鈕後只會執行一次function <!DOCTYPE html> <html> <head> <style> button {
margin:5px; } button#theone { color:red; background:yellow; } </style> <script src="http://code.jquery.com/jquery-latest.js"> </script> </head> <body> <button id=“theone”>點我一次，但我也只會改變一次</button> <script> $('#theone').one('click',function(){ $(this).text('i change!'); }); </script> </body> </html> Click後

以上的one()方法，若要用bind與unbind的寫法也是會達到一樣的效果。 <以上省略，同上頁> <body> <button id=“theone”>點我一次，但我也只會改變一次 </button> <script> $('#theone').bind('click',function(){ $(this).text('i
change!'); $(this).unbind(event); }); </script> </body> </html> Click後

trigger() Trigger為觸發的意思，此方法用來觸發預定事件或是自訂事件 換句話說不需要按下滑鼠或式按鈕等等也會自動執行 .trigger( eventType [, extraParameters] )
.trigger( event ) eventType: 如click ,submit等等 extraParameters: 傳遞給事件的額外的參數 Event: jQuery的event

改自官方範例 : 此範例#foo綁定了一個click的事件，照理說必須按下#foo才會alert #foo 的內容。但在下行以.trigger方法使click事件自動觸發，因此一顯示頁面時就不需要click點按#foo 也會自動alert #foo的內容。 <!DOCTYPE html>
<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="foo">gogogogogog</div> <script> $('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); </script> </body> </html>

triggerHandler() 執行元素的所有事件處理程序。 .triggerHandler ( eventType [, extraParameters] ) eventType: 如click
,submit等等 extraParameters: 傳遞給事件的額外的參數陣列

triggerHangler( )與trigger類似，但有以下例外:  The .triggerHandler() method does not cause
the default behavior of an event to occur (such as a form submission). 此方法不會處發事件的預設行為，例如表單的submit  While .trigger() will operate on all elements matched by the jQuery object,.triggerHandler() only affects the first matched element. Trigger會運作在所有的元素，但triggerHander()只會作用在第一個符合的元素  Events created with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing. triggerHander( )不會將事件往上傳遞。  Instead of returning the jQuery object (to allow chaining), .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns undefined 如果沒有事件函數被觸發，trigger會回傳undefinde

改自官方範例 : 第一個按鈕可以得到焦點，第二個按鈕不會得到焦點 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"> </script>
</head> <body> <button id="old">這是.trigger("focus")</button> <button id="new">這是.triggerHandler("focus")</button> <br/><br/> <input type="text" value="To Be Focused"/> <script> $('#old').click(function(){ $('input').trigger("focus");}); $('#new').click(function(){ $('input').triggerHander("focus"); }); </script> </body> </html>

live() 連結事件到所選取的元素  .live( events, handler(eventObject) )  .live( events,
data, handler(eventObject) )  .live( events-map ) As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). 在1.7的版本中，live( )方法已經過時了(淘汰)。使用.on( )去附加事件。舊版的用戶應該更優先使用.delegate()勝過.live()

改自官方範例 : 每點按P元素就會增加一個P元素 <!DOCTYPE html> <html> <head> <style> p {
background:yellow; font-weight:bold; cursor:pointer; padding:5px;width:100px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>按我!</p> <script> $("p").live("click",function(){ $(this).after('<p>'+'增'+'</p>'); }); </script> </body> </html>

die() Remove all event handlers previously attached using .live() from
the elements. 移除元素所有事件函式的live連結  die()  die( eventType [ , handler ] ) 這個方法類似於unbind( )移除綁定事件。在jQuery 1.7中，die( )還有live( )已經不推薦使用了，改用off()方法去刪除綁定的事件。

改自上一個live( )的範例 : 使用die( )移除P元素的click事件 <!DOCTYPE html> <html> <head> <style>
p { background:yellow; font-weight:bold; cursor:pointer; padding:5px;width:100px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>按我!</p> <script> $("p").live("click",function(){ $(this).after('<p>'+'增'+'</p>'); }); $("p").die("click"); </script> </body> </html>

delegate() 連結事件到所選取的元素 .delegate( selector, eventType, handler(eventObject) ) .delegate( selector, eventType,
eventData, handler(eventObject) ) .delegate( selector, events ) 用法與.bind()類似，.delegate()是.live() 的替代方法，將特定的事件連結到所選取的HTML元素

As of jQuery 1.7, .delegate() has been superseded by the
.on() method  在jQuery1.7後，delegate()已漸漸被.on方法所取代。  以下兩種寫法一樣的效果: $(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(elements).on(events, selector, data, handler); // jQuery 1.7+

 Example: $("table").delegate("td", "click", function() { $(this).toggleClass("chosen"); }); 等同於使用以下.on方法 :
$("table").on("click", "td", function() { $(this).toggleClass("chosen"); });

官方範例: 每點按一次P元素則產生一個新P元素 <!DOCTYPE html> <html> <head> <style> p { background:yellow;
font-weight:bold; cursor:pointer; padding:5px; } p.over { background: #ccc; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Click me!</p> <span></span> <script> $('body').delegate('p','click',function(){ $(this).after("<p>a</p>"); }); </script> </body> </html>

undelegate() 移除元素的事件處理函式 .undelegate() .undelegate( selector, eventType ) .undelegate( selector, eventType,
handler(eventObject) ) .undelegate( selector, events ) .undelegate( namespace ) The .undelegate() method is a way of removing event handlers that have been bound using.delegate(). Undelegate()方法是用來移除delegate()的函式。 As of jQuery 1.7, the .on() and .off() methods are preferred for attaching and removing event handlers. 在jQuery中，.on()跟.off()是用來附加或移除事件處理函式的首選。

官方範例: <!DOCTYPE html> <html> <head> <style> button { margin:5px; }button#theone
{ color:red; background:yellow; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="theone">Does nothing...</button> <button id="bind">Bind Click</button> <button id="unbind">Unbind Click</button> <div style="display:none;">Click!</div> <script>function aClick(){ $("div").show().fadeOut("slow"); } $("#bind").click(function(){ $('body').delegate('#theone',"click",aClick) .find("#theone").text("can click"); }); $("#unbind").click(function(){ $('body').undelegate("#theone","click",aClick) .find("#theone").text("dows nothing"); }); </script> </body> </html> http://api.jquery.com/undelegate/

.on() 將一個或多個的事件處理函式連結在所選取的元素  .on( events [, selector] [, data],
handler(eventObject) )  .on( events-map [, selector] [, data] ) 用法與功能似.bind() , delegate() , live() 使用on連結事件，移除要使用.off()移除 bind() v.s unbind() delegate() v.s undelegate() on() v.s off()

.off() 移除事件處理程序  .on( events [, selector] [, data], handler(eventObject)
)  .on( events-map [, selector] [, data] ) 用法與功能似.bind() , delegate() , live() 使用on連結事件，移除要使用.off()移除 bind() v.s unbind() delegate() v.s undelegate() on() v.s off()

官方範例 (似P.26的example，只是這個範例是用.on()&off( )去寫，而相同的功能在p.26只是使用delegate()跟undeletage()去寫) <!DOCTYPE html> <html> <head> <style> button
{ margin:5px; } button#theone { color:red; background:yellow; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="theone">Does nothing...</button> <button id="bind">Add Click</button> <button id="unbind">Remove Click</button> <div style="display:none;">Click!</div> <script> function aClick() { $("div").show().fadeOut("slow"); } $("#bind").click(function () { $("body").on("click", "#theone", aClick) .find("#theone").text("Can Click!"); }); $("#unbind").click(function () { $("body").off("click", "#theone", aClick) .find("#theone").text("Does nothing..."); }); </script> </body> </html>

.jQuery.proxy() 移除事件處理程序  jQuery.proxy( function, context )  Function =>要改變內容的函式
 context =>設定函式內容的物件(object)  jQuery.proxy( context, name )  Name =>要改變內容的函式名稱傳回新的有特定內容的函式 jQuery.proxy() 可寫成$.(proxy) Proxy =>英文意為代理之意。

 This method is most useful for attaching event handlers
to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function if passed the original. 這個用法多半有用再將物件處理程序綁定在一個元素，此元素的內容另外指向一個不同的物件

改自官方範例 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p><button
id="test">Test</button></p> <p id="log"></p> <script> var obj = { name: "win", test: function(){ $('#log').append( this.name ); $('#test').unbind("click",obj.test); }}; $('#test').click($.proxy(obj,"test")); </script> </body> </html> 在#test(button)按下(click)之後使用$.proxy方法改變內容及函式名稱 (function,content)=>(obj,”test”) 使得一下button之後#log會顯示name(win)，再解除#test的 click事件，也就是按下一次 #test之後click就解除了。

jQuery-events(3)

jQuery-events(3)

winwu

More Decks by winwu

Other Decks in Programming

Featured

Transcript

jQuery- Event(3)- Event Handler Attachment 關於jQuery的事件之事件處理 Edit by win 2012.7.8

Event Handler Attachment的方法有…. (後頁不按照順序介紹) .bind() .delegate() .die() .live() .off() .on()

事件處理 • jQuery有以下方法來連結事件: Event方法名稱功能 bind() 綁定事件 unbind() 刪除綁定事件 one()

bind() -綁定事件 將事件處理函式連結到元素的事件上  .bind( eventType [, eventData], handler(eventObject) )

 使用.bind()的基本方式: $('#foo').bind('click', function() { alert('User clicked on "foo."'); });

 pass some extra data before the event handler 

改自官方範例: 顯示滑鼠正在點擊的x與y座標 <!DOCTYPE html> <html> <head> <style> p { background:yellow;

unbind() -移除綁定事件  以上方法會移除所有#foo的綁定事件 with no arguments, .unbind() removes all

one() 只執行一次處理事件的函式 .one( events [, data], handler(eventObject) ) Event: 事件種類的名稱，如click

範例 : 按下按鈕後只會執行一次function <!DOCTYPE html> <html> <head> <style> button {

以上的one()方法，若要用bind與unbind的寫法也是會達到一樣的效果。 <以上省略，同上頁> <body> <button id=“theone”>點我一次，但我也只會改變一次 </button> <script> $('#theone').bind('click',function(){ $(this).text('i

trigger() Trigger為觸發的意思，此方法用來觸發預定事件或是自訂事件 換句話說不需要按下滑鼠或式按鈕等等也會自動執行 .trigger( eventType [, extraParameters] )

改自官方範例 : 此範例#foo綁定了一個click的事件，照理說必須按下#foo才會alert #foo 的內容。但在下行以.trigger方法使click事件自動觸發，因此一顯示頁面時就不需要click點按#foo 也會自動alert #foo的內容。 <!DOCTYPE html>

triggerHandler() 執行元素的所有事件處理程序。 .triggerHandler ( eventType [, extraParameters] ) eventType: 如click

triggerHangler( )與trigger類似，但有以下例外:  The .triggerHandler() method does not cause

改自官方範例 : 第一個按鈕可以得到焦點，第二個按鈕不會得到焦點 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"> </script>

live() 連結事件到所選取的元素  .live( events, handler(eventObject) )  .live( events,

改自官方範例 : 每點按P元素就會增加一個P元素 <!DOCTYPE html> <html> <head> <style> p {

die() Remove all event handlers previously attached using .live() from

改自上一個live( )的範例 : 使用die( )移除P元素的click事件 <!DOCTYPE html> <html> <head> <style>

delegate() 連結事件到所選取的元素 .delegate( selector, eventType, handler(eventObject) ) .delegate( selector, eventType,

As of jQuery 1.7, .delegate() has been superseded by the

 Example: $("table").delegate("td", "click", function() { $(this).toggleClass("chosen"); }); 等同於使用以下.on方法 :

官方範例: 每點按一次P元素則產生一個新P元素 <!DOCTYPE html> <html> <head> <style> p { background:yellow;

undelegate() 移除元素的事件處理函式 .undelegate() .undelegate( selector, eventType ) .undelegate( selector, eventType,

官方範例: <!DOCTYPE html> <html> <head> <style> button { margin:5px; }button#theone

.on() 將一個或多個的事件處理函式連結在所選取的元素  .on( events [, selector] [, data],

.off() 移除事件處理程序  .on( events [, selector] [, data], handler(eventObject)

官方範例 (似P.26的example，只是這個範例是用.on()&off( )去寫，而相同的功能在p.26只是使用delegate()跟undeletage()去寫) <!DOCTYPE html> <html> <head> <style> button

.jQuery.proxy() 移除事件處理程序  jQuery.proxy( function, context )  Function =>要改變內容的函式

 This method is most useful for attaching event handlers

改自官方範例 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p><button