---

        感謝前兩篇各位版友的不吝支持 , 接下來要推出第三篇 ,
        還請各位版友多多指教、討論。︿︿


        希望看完這篇 , 你們能了解網頁上得事件有哪些 ,
        以及為什麼事件在跨平台這件事情上是件很棘手的事情.

        ────────────────────────────────

        繼「無所遁形的selector」一文體驗到的強大 jquery selector ,
        暫且讓我們放下 jquery 物件的各種attr css 的屬性不談 ,

        先來談談我們之前所講過 , javascript最重要的觸發點：事件.

        ────────────────────────────────

      ＠事件，網頁樂團中的鼓手。

        事件掌握著網頁上得所有節奏 , 就算你完全不使用任何javascript ,


        事實上 , 當我看到這個網頁時  , 才深深地體會js 的可能性.
        http://www.nihilogic.dk/labs/mario/mario_small_music.htm


      ＠事件聽起來是個通用名詞，那我們有哪些事件呢？




        底下簡單列表 , 將我們今天的各大主角簡單列出來

        on click        物件被按下
        on change       物件內容改變（select,input text等form類型元件專用)
        on mouseover    滑鼠進入dom元件四周的那一剎那觸發
        on mouseout     滑鼠離開元件四周時觸發
        on mousemove    介於over跟out之間的所有移動行為（會頻繁觸發）
        on focus        當元件被點選 或者透過tab鍵取得焦點時觸發
        on load         在網頁最一開始讀取完成時執行 , 常用於body或iframe.
        on keydown      按下鍵盤按鍵時 ,主要用於body跟input text.
        on keyup        放開鍵盤按鍵時

        還有更多其他種類 可見此網頁詳細介紹 ,
        http://stuck.myweb.hinet.net/c/js/js_events.htm


      ＠這麼多種？ 我統統都會用到嗎？


        我們這篇接下來要告訴大家的是 , 「什麼是事件」.


      ＠什麼？ 前面的介紹還不夠詳細嗎？

        乍看之下你似乎知道所有事情 , 但繼續耐心看下去 ,
        你會了解前面介紹的只是事件的一半左右而已 ,

        接下來我們要教你的仍然是書上所不常提到 , 但是非常有趣的事情.


      ＠不是就像click一樣 , 按下去就一個事件嗎？

        沒錯 , 在某些狀況下是這樣 , 你不需要了解任何事件的細節 ,
        就只是在對應的觸發時間點執行js 不需要任何其他資訊 .


        但是當你想在網頁上追蹤你的滑鼠游標時 , 當你想知道你按下的鍵盤按鍵
        究竟是哪一顆按鍵時 ,或者看完mario之後 ,
        你可能會有雄心壯志想做個網頁版的格鬥天王之類的 ,

        那你就需要一些關於事件的資訊.


      ＠事件紀錄者的歡喜與憂愁

        值得高興的事情是 , 瀏覽器早就幫你想到了這件事情 ,
        於是每個事件必定會伴隨著一個紀錄事件資訊的物件.（底下以event代稱）

        event物件會紀錄是誰觸發了這個事件（srcElement）,
        滑鼠游標移到哪，或者keydown按下的按鍵是哪一個(keycode)之類的。


        許多特效諸如tooltip , dragand drop 都是根據這些資訊做出來的 ,
        既然如此 , 那為什麼要說憂愁呢？





      ＠能跨瀏覽器當然好呀 , why not?



        而且事件提供的內容來講 , 更是各家都有所不同 ,

        像是要透過事件取得被綁定的對象是誰 , ie下是event.target,
        firefox下是 event.srcElement, 諸如此類的 .

        在你撰寫程式碼時需要時時注意,是否需要寫一些 if-else ,
        以達到不同瀏覽器一樣的效果.


      ＠看起來跨瀏覽器很麻煩...

        沒錯！所以有些人選擇只支援 ie體系 , ie only的是非不是我們所關心的 ,
        我們有更好的選擇！就是選用 jQuery當我們的平台媒介！

        在jQuery底下 , 常見瀏覽器有支援的事件元素 , 全部被整合為同樣的介面,
        而我們所關心的事件物件如何取得 , 則是透過function傳入param的方式.


        有興趣的朋友們可以分別用fx跟ie開這個sample頁 ,
        透過mousemove一窺事件的全貌.

        http://tonyq.org/test/testMousemove.html

        左右皆是將事件內容印出來的結果.



        在大部分的狀況下 , jQuery 都將 跨平台的問題謹記在心,

        除了部份嚴重issue （ex. ie6 bgirame) 等需特別處理外 ,
        jQuery通常能達到足以令人滿意的跨平台效果.

        （之後應會有機會繼續介紹其他跨平台特性的部份。）


      ＠一個元素只能綁定一種事件嗎？

        答案當然是否定的 , 比方說我可能會希望 mouseover移動過inputtext,


      ＠可以在javascript中綁定事件嗎？


        你可以把 onclick 等參數視為 dom成員中的一種 ,
        賦予其對應的事件成員一個 function 物件.

        比方說 inputNode.onclick=function(){ alert("hi");};

        就是針對inputNode綁定onclick事件.

        但是透過 = 指定的話 , 之前綁訂的事件會被覆蓋 ,
        如果你希望是附加而非覆蓋的話 , 應該要透過 attachEvent的方式進行.

        這裡又有瀏覽器相容性的問題 attachEvent是ie only ,
        addEventListener 則是 firefox有支援的 .


      ＠天啊怎麼又來了！！難道就沒有跨瀏覽器的好解法？

        現在你知道為什麼我們要特地強調跨瀏覽器平台了吧（聳肩）

        別擔心 , 要綁定幾次都沒問題 , jQuery會幫我們處理好一切的.

        $("#ele").click(function(e){alert("hi");})
                .click(function(e){alert("hi");})
                .click(function(e){alert("hi");})
                .click(function(e){alert("hi");});

        你看 我們這不就綁定了四個事件給ele了嗎?
        (http://tonyq.org/test/testEventBinding.html )


     ＠咦？ $("#ele").click(event).click(event) ...?

        這是jquery的有趣特性之一 , 他幾乎所有成員都會回傳jquery物件本身,
        所以我們可以達成這種稱之為「method chaining」的效果.

        當然你想中規中矩的寫成
        $("#ele").click(function(e){alert("hi");});
        $("#ele").click(function(e){alert("hi");});

        也無妨 , 一切取決於你的習慣.

        當物件被click時  , 會按照綁定的順序依序觸發.
        （當你不想要時 , 可透過  $("#ele").unbind("click") 來解除所有事件.))


     ＠事件真是複雜 , 還有我應該知道的嗎？

        關於事件其實我們聚焦在基礎資料的介紹 , 因為我們認為
        你早晚會知道 hover事件 = mouseover + mouseout ,

        以及原來想要到處都擺個click+ajax的慾望是如此讓人興奮（害怕）.


        但是還有一件事情我們還沒有告訴你 , 那就是事件的相依性.
        在能見到的區域中 , body是所有元素的根源 , 相信你不會否認這句話 ,


        當你在頁面上綁定一個元素, （以下例中的 input button)

        <body >
                <div>
                        <input type="button" value="button" />
                </div>
        </body>

        則當button被click時 , div跟body的onclick也會被觸發.
        因為button實際上也是div的成員 , div也會把它視為一體的觸發

        同樣的理由 , 所以對body也觸發 ,
        有些時候我們會需要用這個trick 實做一些事情.


      ＠那能不能讓他不要觸發上級的元素呢？

        可以 ,對事件方法 return false ; 告訴他我執行到這裡就結束.
        ex. $("[type=button]").click(function(e){return false;});


        相依性最常見的用途在於檢查表單資料是否正確填寫 ,
        我們可以透過
        $("form").submit(
                function(e){
                     if($("#inputdata").val()=="")  //如果某個input text是空白
                        return false; //我就不submit了
                }
        );


      ＠體驗時間
        我們今天介紹的是 jquery corner這隻plug-in ,
        可以幫你把區塊式的元件很輕鬆的加上圓角的效果 .

        http://tonyq.org/jqtalk/jq3_jqCorner.html


---
剛剛歷經pcman當掉跟差點睡著 的危機, 總算還是順利寫完了 ,
祝各位版友週末愉快..需要加班的也能早點休息 :)


最後再補一些注意事項 ,

例子大多是針對CLICK寫 , 不過其他的事件其實大同小異,
另外 js 使用過度有害網頁健康 , 請不要真的作成到處都click +ajax,

以及各種酷炫特效不斷充斥 , 大多數狀況下這樣會導致網頁執行起來有笨重的感覺.

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

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

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
※ 編輯: TonyQ           來自: 220.132.59.247       (08/09 03:01)
※ 編輯: TonyQ           來自: 61.224.239.208       (12/15 23:48)

--