---

※ 本文轉錄自 dinos 信箱

---

※ [本文轉錄自 Web_Design 看板]

---

        由於本系列文章主題是「從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
沒想到又寫到一半睡著 , 放假果然是睡覺的好日子 , 來接著寫今天的主題好了.

--
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247

--
--
※ 作者: dinos  時間: 2012-05-23 11:54:59  來自: 175-181-51-65.adsl.dynamic.seed.net.tw