jQuery——事件處理

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

3、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：當瀏覽器滾動條位置改變時觸發
3、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用于指定要刪除的事件處理程序的名稱。
4、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();
               }
           });
       });

4、事件冒泡 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();