※ [本文轉錄自 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