jQuery——事件處理

一、事件流模型
    若是單擊一次在HTML頁面上的某個按鈕，不只會觸發按鈕的單擊事件，還將觸發按鈕所屬容器(div、span)等的單擊事件，同時還將觸發父級容器的單擊事件，直至body、html和document，這一動做形成一臉串的事件觸發，造成一個事件流。由於事件流模型不一樣，整體能夠分爲冒泡型事件流和捕獲型事件流兩種。
       1）冒泡型事件流：冒泡型事件流將從下到上一級一級的觸發事件流。
       2）捕獲型事件流：捕獲型事件流將從上到下一級一級的觸發事件流。
   通常使用的是冒泡型事件流。
二、js事件種類
   1）鼠標事件： ondbclick(雙擊)、 onmouseout(光標離開某對象範圍)
   2）鍵盤事件
       onkeydown：當鍵盤上的某個鍵被按下時觸發此事件。
       onkeypress: 當鍵盤上的某個鍵被按下之後觸發此事件。
       onkeyup：當鍵盤上的某個按鍵被釋放時觸發此事件 。
   3）頁面事件
       onerror：出現錯誤時觸發此事件
       onload：頁面內容完成時觸發此事件
       onresize：當瀏覽器的窗口大小被改變時觸發此事件
       onscroll：瀏覽器的滾動條位置發生變化時觸發
       onunload：當前頁面被改變時觸發
   4）表單事件
       onblur：當前元素失去焦點時觸發
       onchange：當前元素失去焦點而且元素的內容發生改變時觸發此事件
       onfocus：當某個元素得到焦點時觸發
       onsubmit：當某個表單被提交時觸發此事件

三、jQuery事件
   jQuery提供了一個DOM加載完成的事件，即ready事件，ready事件是一個能夠在DOM加載完成後執行的事件，該事件能夠綁定多個響應函數，這個事件
是window.onload同樣，ready事件是在全部DOM標記就緒時就被觸發，而不必定與之關聯的其餘資源文件也能就緒。
   /* document 對象加載成功 */  
   $(document).ready(function(){  
       alert('document load');
   });  
   /* window 加載成功 */  
   $(window).ready(function(){  
       alert('window load');
   });  
   /* ID爲show的DIV加載成功 */  
   $("#show").ready(function(){  
       //...
   });        
   /* html 標籤加載成功 */  
   $("html").ready(function(){  
       //...
   });
   //...對於任何dom均可以使用這個方法，當該節點加載成功執行方法。    
   1）表單事件
    a、focus: 控件得到焦點時觸發
       blur: 控件失去焦點時觸發
       $("input").focus(function(){  
           /* 得到焦點 */  
       })  
       .blur(function(){  
           /* 失去焦點 */  
       });  
    b、change: 控件值改變時觸發
       $("input[name=username]").change(function(){  
           /* 值改變時觸發 */  
           alert("用戶名文本框內容已改變。");  
       });  
    c、select: 空間內容被選中時觸發  
    d、submit: 表單提交時觸發
    e、focusin: 當前元素或其子元素得到焦點時觸發
       focusout: 當前元素或其子元素失去焦點時觸發
   2）其餘事件    
       load：當該元素加載就緒後觸發
       upload: 當該元素卸載後觸發
       error：當該元素髮生錯誤時觸發
       resize：當瀏覽器改變大小時觸發
       scroll：當瀏覽器滾動條位置改變時觸發
三、JQuery事件處理
   1)事件綁訂   event / e1.html
       bind(type,[data],fn)
           type:事件類型
           data:可省略，{參數：值，...}
           fn:事件處理函數
       bind(map)
           一次綁定多個事件map是鍵值對{click:function1,...}也能夠直接寫匿名方法。
   2)綁訂方式的簡寫形式
       click(function(){});
   3)合成事件 event/e2.html  e3.html
       hover(enter,leave) : 模擬光標懸停事件，即mouseover事件和mouseout事件
           $('.s1').hover(function(){
               $(this).addClass('s2');
               },function(){
                   $(this).removeClass('s2');
           });
       toggle(fn1,fn2...)：模擬鼠標連續單擊事件
       live(type, fn)：                該方法爲整個頁面生命週期內的某一類對象綁定一個事件處理程序
   4)刪除事件
       unbind([type], data)：刪除匹配對象的事件處理程序，對應bind方法，它能夠刪除全部以bind方式綁定的自定義事件處理程序
           $("#b").unbind("click");
       die([type][,fn])：die方法與live方法對應，用於解除用live註冊的自定義事件 ，type用於指定要刪除的事件類型，fn用於指定要刪除的事件處理程序的名稱。
四、jQuery事件對象的屬性與方法
   屬性：
       type：得到該事件對象的事件類型，如click、focus、mouseover等
       target：得到事件觸發者(DOM對象)
       data：得到調用事件時傳入的額外參數集合
       relatedTarget：得到觸發鼠標事件的DOM元素
       currentTarget：得到當前DOM元素(等同於this關鍵字)
       pageX/pageY：得到鼠標事件中，鼠標光標相對於頁面左上角的位置
       result：得到上一個事件處理函數返回的值
       timeStamp：得到事件發生的事件戳
   方法：
       preventDefault()：阻止默認的事件行爲
       isDefaultPrevent()：是否執行過preventDefault()方法
       stopPropagation()：中止事件冒泡
       isPropagationStopped()：是否調用了stopPropagation()方法
       stopImmediatePropagation()：停止處理該事件，該方法將中止該事件的其餘事件處理程序，而且中止事件冒泡
       isImmediatePropagationStopped()：是否調用了stopImmediatePropagation()方法

       例：
       $(function(){
           $('#a1').click(function(e){
               alert("你點擊了一個連接");
               //中止冒泡
               e.stopPropagation();
           });            
           $('#a2').click(function(e){
               var flag = confirm('肯定刪除嗎');
               if(!flag){
                   e.preventDefault();
               }
           });
       });

四、事件冒泡 event/ e4.html
       a,什麼是事件冒泡?
           子節點產生的事件會依次向上拋給相應的父節點。
       b,如何取消事件冒泡?
           event.cancelBubble = true;
       c, 如何得到事件對象?
           只須要給事件處理函數添加event做爲參數，好比<a href...  onclick="clickA(event);">
       d, 事件對象的做用?
            做用1： 找到事件源
                event.target;    firefox,chrome支持
                event.srcElement;  ie支持
                event.target || event.srcElement
            做用2:   得到鼠標點擊的座標
                event.clientX;
                event.clientY;
       (1)得到事件對象 event / e5.html
           只須要給事件處理函數傳一個參數。
           click(function(event){});
       (2)事件對象的做用  
           a,得到事件源
               event.target;
           b,得到鼠標點擊的座標
               event.pageX
               event.pageY
           c,事件類型
               event.type
       (3)中止冒泡   event / e6.html
           event.stopPropagation()
       (4) 中止默認行爲
           event.preventDefault()
       5)模擬操做 event / e7.html
           trigger('click')

           //$('#username').trigger('focus');
           //也能夠簡化成
           $('#username').focus();