→ kosgroup:推 05/04 02:43
推 etman395:推 08/16 02:38
※ [本文轉錄自 Web_Design 看板]
作者: TonyQ (沉默是金) 看板: Web_Design
標題: [心得]從 js 到 jQuery 之三 補充資料
時間: Sat Aug 9 23:10:52 2008
由於本系列文章主題是「從js到jquery」 , 所以主要內容在於對比 js
到 jquery之間 , 究竟改善了什麼 , jQuery究竟可以對我們有什麼助益 ,
順便介紹jQuery的一些常用的plug-in.
目前是預定一天一篇主題 , 主題目前規劃約十篇左右 ,
主題從簡介js , 基本dom操作 , 到進階的元素瀏覽（Traversing） ,
再到 effects 跟一些頁面操作 （manipulation）,
我想 , 我的目標是希望讓它變得很有趣 . :)
────────────────────────────────
礙於篇幅 , 個人經驗是bbs 適合閱讀的字數約800~1000字 , 約4-5頁 ,
內容沒有辦法專注於 jQuery的介紹 , 而僅摘出筆者認為適合的內容,
於是在有必要與討論互動的狀況下 , 另開補充資料來彌補介紹文章不足.
本文開始.
────────────────────────────────
本篇為列出jQuery各項常用事件的寫法 , 所作的簡單 jQuery Event
操作說明(usage) .
文件參考
http://docs.jquery.com/Events
文件中提到共39個function , 其中約有一半是trigger , 另一半則是 binder ,
其中我僅列出一些基本的binder 跟 trigger 的用法 ,
因為大部分的用法都大同小異 , 有需要時再依照本篇所介紹的規則去查詢吧！
────────────────────────────────
click應該看膩了 , 我們用change來當例子
change( ) Returns: jQuery
Triggers the change event of each matched element.
change( fn ) Returns: jQuery
Binds a function to the change event of each matched element.
jQuery事件裡面通常 , 有給他fn的就是 binder , 把事件綁定上去的,
而通常沒有事件的就是trigger , 只呼叫某個元件的某個事件.
比方說以下的範例
-------------------------------------------------
$("input[type=text]").change(
function(e){
alert(" you modify the text");
}
);
-------------------------------------------------
來分析一下
$("input[type=text]")
是要被綁定的jQuery對象 , 指網頁上的所有文字輸入框.
function(e){ alert("..."); }
要綁定給 jQuery對像的事件 , 且綁定在 click事件上.
-------------------------------------------------
＠關於事件...
從這裡我們就可以有個基本問題 ,
一定要這樣宣告事件不可嗎? 不能重複利用事件嗎？
我們其實也可以這樣做
-------------------------------------------------
/*注意,這是個global function.*/
function doSomething(e){
alert(" you modify the text");
}
-------------------------------------------------
$("input[type=text]").change(doSomethining);
-------------------------------------------------
＠還有別的寫法嗎？ 聽說javascript宣告方式很多元？
沒錯 , 所以當然這樣做也是沒問題的.
-------------------------------------------------
var doSomething=function(){alert(" you modify the text");};
$("input[type=text]").change(doSomethining);
────────────────────────────────
＠用這些方法有什麼差異嗎？
上面這些寫法是各種function的寫法 , 原則上沒什麼差異 ,
除了最一開始的那種是沒有名字的函數物件以外 .
另外就是要考慮到如果是全域function , 要注意到取名時別和別的事件同名.
而想觸發元件的change 事件的方法就是 ,
$("input[type=text]").change();
給他空的參數內容就會自動看成trigger ,去觸發事件了,
通常trigger會比較常用在submit跟focus , 當然也有其他的需要 ,
比方說我們想模擬按鈕被按下的行為時.
＠還有什麼要注意的嗎？
當然有一個特殊的事件不適用這個模式 ,
hover( over, out )
這個事件可以說是由 mouseover 跟 mouseout組合而成 ,
他接收兩個事件變數 , over時執行第一個 , out時執行第二個 .
另外就是 resize( fn ) 跟 scroll( fn ) 他不支援你直接去觸發這個事件 ,
因為這是一種特別的行為 , 當然你還是可以用別的方式來triger他.
比方說對它設定 css 寬高可以觸發resize之類的.
＠如果我想創造自己的事件...?
其實 jQuery 支援自訂event , 所以有時我們也會用到底下這四個方法 .
bind( type, data（可省略）, fn )
one( type, data（可省略）, fn )
trigger( type, data )
unbind( type, data )
以前面的例子來說 , 也可以寫成以下的形式.
$("input[type=text]").bind("change",function(e){alert("modified");});
至於data , 如果你給bind三個參數 （註1）,
他會被當成參數傳遞 , 可以在 e.data 取得這個資料.
＠one看起來跟 bind好像？ 他們一樣嗎？
沒錯 , 很好的觀察力 , one 幾乎跟 bind 一模一樣 ,
只是他只會被執行一次就會自動unbind .
而trigger則是對應的觸發者 , 所以你也可以binding一個非預設的event type,
然後透過trigger去觸發該event , 雖然說實務設計上我自己很少運用這點.
大概只會拿來對table做 "addRow" , "deleteRow" 之類的自訂事件吧
unbind則是移除所有該類型的事件
＠我binding了三次 , 但我只想移除其中一個 , 可以嗎？
答案是可以 , 但是你必需要採用 bind 方法綁定這個 function ,
並且給他一個我們稱之為namespace的東西 , 再透過namespace unbind.
這個困擾其實比較常發生在 plug-in的撰寫上 ,
當你同時使用多個plug-in時 , 搞不好大家都要unbind某個元素的事件
為了不互相影響 , 就得透過這樣的機制 .
for example
$("input[type=text]")
.bind("change.first",function(e){alert("alert first");})
.bind("change.second",function(e){alert("alert second");})
.bind("change.three",function(e){alert("alert three");});
$("input[type=text]").unbind("change.second");
這樣就會只消掉 second , 而first跟three都留著了.
這部份主要是參考 http://blog.ericsk.org/archives/836 ericsk前輩
的介紹 , 有興趣的讀者可以前往閱讀.
────────────────────────────────
註1.
在這裡我們可以理解到 雖然javascript不支援多型(overloading) ,
但是jQuery在設計上其實運用了不少多型技巧, 他靠得是內容,型別跟參數
數量判定他屬於哪一種對象 , $ 這個init function更是運用的鬼斧神工.
---
這篇是補充資料 , 就不放體驗時間了. XD
沒想到又寫到一半睡著 , 放假果然是睡覺的好日子 , 來接著寫今天的主題好了.
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247