jquery基礎學習之事件

文章是從官網整理，方便學習可以隨意裝載不需要註明作者！

   1，載入
    $(document).ready(function(){
        // 在這裏寫你的代碼...
    });一般就是需要頁面載入是就執行的操作，就直接用上面的代碼，這樣寫的好處就是可以極大的提高web在應用程序中的響應速度。
　2，事件處理
    1 bind(type,[data],fn),這個就是爲每個匹配元素的特定事件綁定時間處理函數
          .bind() 方法是用於往文檔上附加行爲的主要方式。所有JavaScript事件對象，比如focus, mouseover, 和 resize，都是
          可以作爲type參數傳遞進來的 。
          .bind('click',fn)可以簡寫爲.click(function()).
          .bind()最基本的用法是:
         　　  $('#foo').bind('click', function() {
                     alert('User clicked on "foo."');
                  });
                  簡寫就是$('#foo').click(function(){
                               alert('User clicked on "foo."');
                         });//爲了更好的理解原理，下面就不再列出簡寫模式
                                            多個事件$('#foo').bind('mouseenter mouseleave', function() {
                   　                         　　　　　$(this).toggleClass('entered');
                              　            　　　　  });
                       fn可以像js的函數一樣，可以接受一個參數，當這個函數被調用時，一個Js事件對象會作爲一個參數傳進來。 
 　　　　　　　　　　　　　　         $('#foo').bind('click', function(event) {
                                                          　　alert('The mouse cursor is at ('
                                                          + event.pageX + ', ' + event.pageY + ')');
       　　　　　　　　　　　　　                 });
                                                         　});
                           傳遞事件數據：var message = 'Spoon!';
                                                   $('#foo').bind('click', function() {
                                                      alert(message);
                                                    });
                                                     message = 'Not in the face!';
                                                     $('#bar').bind('click', function() {
                                                         alert(message);
                                                      });
                      特殊函數：當.bind 變成.one時，其他一樣，只是這個函數只會被執行一次。
                      總結：type 含有一個或多個事件類型的字符串，比如"click"或"submit"，還可以是自定義事件名。
                                 data 作爲event.data屬性值傳遞給事件對象的額外數據對象
                                  fn 綁定到每個匹配元素的事件上面的處理函數
              　　    2trigger(type ,[data]),在每一個匹配的元素上觸發某類事件，這個會導致瀏覽器的默認執行操作，例如提交表單之類的
                        $("p").click( function (event, a, b) {
                                 // 一個普通的點擊事件時，a和b是undefined類型
                                 // 如果用下面的語句觸發，那麼a指向"foo",而b指向"bar"
                         } ).trigger("click", ["foo", "bar"]); 
                       特殊函數：triggerHandler(type ,[data])這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認

　　　　　　　動作， 也不會產生事件冒泡
                                   $("input").trigger("focus");
                                            });
                                   $("#new").click(function(){
                                   $("input").triggerHandler("focus");
  　　　　                          });
                                   $("input").focus(function(){
                                  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
        　　                         });
                        總結：type 一個事件對象或者要觸發的事件類型
                                 data 傳遞給事件處理函數的附加參數
                         3unbind()就是第一個的反向操作，從每一個匹配的元素中刪除綁定事件
                           $("p").unbind( "click" )
     3 事件委派
                           1 live（type,[data],fn）給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。
                                      簡單說就是一個附加的函數添加之後可以用這個函數直接使用
                                    $('body').append('<div class="clickme">Another target</div>');  
                                    $('.clickme').live('click', function() {
                                            alert("Live handler called."); 
                                         });
                                        阻止默認行爲
                                    $("a").live("click", function(event){
                                     event.preventDefault();
　　　                            });
                               2die(type,fn)所有綁定的live事件都會被移除
                                      function aClick() {
　　                                          $("div").show().fadeOut("slow");
                                        }
                                            $("#unbind").click(function () {
                                                   $("#theone").die("click", aClick)
                                            }
         4 事件切換
                           1 hover 就是css中的hover，在移動端用的很多
                                      $("td").hover(
                                            function () {
                                                    $(this).addClass("hover");
                                             },
                                             function () {
                                                    $(this).removeClass("hover");
                                             }
                                        );
                              總結：就是要記住語法，實際中在移動端很好用，必須要有兩個狀態纔可以
                           2 toggle（fn，fn2，，，）如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二

　　　　　　　　　個函數，
                              如果有更多函數，則再次觸發，直到最後一個。隨後的每次點擊都重複對這幾個函數的輪番調用。 
                              $("td").toggle(
                                    function () {
                                        $(this).addClass("selected");
                                    },
                                    function () {
                                        $(this).removeClass("selected");
                                    }
                               );