摘要：只觸發(fā)事件解除事件任然會(huì)執(zhí)行自定義事件把多個(gè)事件組合起來，或者在特定條件下觸發(fā)事件，普通的事件綁定是無法滿足需要的，可以通過自定義事件來形成組合。

jquery 之所以成為最受歡迎的前端庫(kù)，很大一部分是得益于它的事件具有良好的語(yǔ)義，優(yōu)秀的兼容性，并且便于管理和擴(kuò)展。

在這里我會(huì)介紹 jquery 事件的一些比較基礎(chǔ)的用法。

jquery 事件脫胎于瀏覽器的 addEventListener (W3) 和 attachEvent (IE) 方法 , 提供了跨瀏覽器的一致性API。具體的實(shí)現(xiàn)原理可以參考Aaron的系列文章
jquery源碼分析-事件。

jquery 中實(shí)現(xiàn)事件綁定有多種方式,其中 $(selector).event(func) 方式中 event 支持一系列的瀏覽器事件，文檔加載事件，表單事件，鍵盤事件和鼠標(biāo)事件，但并非全部。

    // 常用的寫法
    
    $("body").click(function(){ })
    
    $("body").on("click",function(){ })
    
    $("body").one("click",function(){ }) // 只會(huì)執(zhí)行一次，然后銷毀事件
    
    // 其他寫法(不推薦)
    $("body").bind("click",function(){ })
    
    $("body").delegate("p","click",function(){ }
    

on 屬于 綁定事件處理器(event-handler-attachment) , 而 .click() 屬于 jquery包裝好的鼠標(biāo)事件。

on 可以綁定dom和bom的既有事件，也可以綁定自定義的事件。所以推薦始終只使用$(selector).on(event,func) 的方式，彈性的綁定更多的事件：

    $(document).hashchange(function(){ })// 報(bào)錯(cuò)，jquery沒有提供此事件處理器
    
    $(document).on("hashchange",function(){ })// 綁定事件成功
    

也可以同時(shí)綁定多個(gè)事件處理同一事務(wù)：

    $("input").on("focus input",function(){ })// 在文本框聚焦和輸入的時(shí)候，都做同樣的事情

或者是綁定多個(gè)事件處理不同事務(wù)：

    $("input")
    .on("focus",function(){ })// 聚焦時(shí)處理 
    .on("blur",function(){ })// 失去焦點(diǎn)時(shí)處理 
    .on("input",function(){ })// 輸入時(shí)處理 
    

根據(jù)綁定事件方式的不同，解除事件也有好幾種方式。
推薦始終使用 $(selector).off(event) 的方式解除事件綁定，因?yàn)?on/off 正好構(gòu)成了一個(gè)開關(guān)。

    /* 
     * 可以解除 $.click(func),$.on("click",func)和 $.bind("click",func) 綁定的事件，
     * 不能解除delegate方式綁定的事件  
    */ 
    $("body").off("click") 
    
    // 同上
    $("body").unbind("click") 
    
    // 只能解除 delegate方式綁定的事件
    $("body").undelegate("p","click")

在 jquery 中，有許多方法根據(jù)其參數(shù)個(gè)數(shù)的不同，既可以是賦值，也可以做為取值操作。
事件也不例外，許多時(shí)候可以利用這個(gè)特性，代替手動(dòng)去觸發(fā)一些事件，以下示例中的兩種方式，都可以實(shí)現(xiàn)自動(dòng)觸發(fā)事件。

    // (當(dāng)表單字段未通過驗(yàn)證時(shí)) 自動(dòng)選中文本值
    $("input").select()
    $("input").trigger("select")
    
    // 觸發(fā)已有的點(diǎn)擊事件
    $(selector).click()
    $(selector).trigger("click")
    
    // 通過觸發(fā)事件，通知select2插件重新渲染
    $("select").change()
    $("select").trigger("change")

事件委托通過事件從目標(biāo)元素冒泡到根元素的原理實(shí)現(xiàn)，它有2個(gè)好處，一是大幅降低事件綁定的內(nèi)存占用，二是可以對(duì)后來加入的元素生效。

    // 寫法
    $(selector).on(event, selector2, func)
    
    // 不推薦的方法
    $(selector).delagate(selector2, event, func)

事件委托原理及性能分析詳見 解密jQuery事件核心 - 委托設(shè)計(jì)（二）

上面列舉了一些簡(jiǎn)單的事件綁定，解綁和委托的使用，下面會(huì)說到一些更加個(gè)性化的用法。

event.preventDefault() 這個(gè)方法用于阻止瀏覽器的默認(rèn)行為，通常用于表單提交或是頁(yè)面滾動(dòng)。

    $("form").on("submit",function(event){
          
      // 阻止了默認(rèn)的表單提交事件，下面可以做一些愛做的事情了
      event.preventDefault();
    })
    
    $(document).on("touchmove",function(event){
          
      // 阻止了瀏覽器的默認(rèn)滾動(dòng)，也可以做些愛做的事情了
      event.preventDefault();
    })

阻止事件傳播即阻止事件繼續(xù)向上冒泡。

    // 點(diǎn)擊div時(shí)，會(huì)依次alert 2 ,1
    $("body").on("click",function(){alert(1)})
    
    $("div").on("click",function(){alert(2)})
    
    // 下面的代碼只會(huì)alert一個(gè) 2，因?yàn)槭录Ｖ姑芭萘?不會(huì)被body監(jiān)聽到
    $("body").on("click",function(){alert(1)})
    
    $("div").on("click",function(event){
       event.stopPropagation();
       alert(2)
    })

除了阻止默認(rèn)的事件，停止向上冒泡之外，有時(shí)還需要禁止后續(xù)的事件執(zhí)行，可以使用 event.stopImmediatePropagation() 方法。該方法會(huì)自動(dòng)調(diào)用 event.stopPropagation() 方法。

    // 不使用 event.stopImmediatePropagation() 將會(huì)alert 2,3,4,1
    // 加上之后只會(huì)alert 2
    $("body").on("click",function(){alert(1)})
    
    $("div").on("click",function(event){
       event.stopImmediatePropagation();
       alert(2)
    })
    $("div").on("click",function(){
       alert(3)
    })
    $("div").on("click",function(){
       alert(4)
    })

想要更精準(zhǔn)的控制事件，很多時(shí)候還需要利用 jquery 的命名空間機(jī)制。

    $("div").on("click.click1",function(){console.log(1)})
    $("input").on("click.click1",function(){console.log(11)})
    
    $("div").on("click.click2",function(){console.log(2)})
    $("input").on("click.click2",function(){console.log(21)})
    
    // 只觸發(fā)click2事件
    $("div,input").trigger(".click2")
    
    // 解除click1事件,click2任然會(huì)執(zhí)行
    $("div,input").off(".click1")

把多個(gè)事件組合起來，或者在特定條件下觸發(fā)事件，普通的事件綁定是無法滿足需要的，可以通過自定義事件來形成 pub-sub 組合。
比如監(jiān)聽 短信驗(yàn)證碼發(fā)送倒計(jì)時(shí)：

    // 偽代碼
    
    setInterVal(function(){
      time--;
      if(time < 1){
        $(".js-timeless-button").trigger("time-end", params0, params1);
      }
    },1000)
    
    // 自定義事件回調(diào)函數(shù)默認(rèn)第一個(gè)參數(shù)為event對(duì)象，以后的參數(shù)依次是傳入的參數(shù)
    
     $(".js-timeless-button").on("time-end",function(event, params0, params1){
       
     });

或者是 頁(yè)面滾動(dòng)到了底部

    // 偽代碼
    
    $(window).on("scroll",function(){
      if((($(window).scrollTop() + $(window).height())) >= $(document).height()){
        $(document).trigger("infinite", params0, params1);  
      }
    })
    
     $(document).on("infinite",function(event, params0, params1){
       
     });

解除自定義事件和解除其他事件的方式相同。可以通過 off 或者 unbind 進(jìn)行。

在 jquery 中，事件是按照其綁定順序依次執(zhí)行的。如果想要調(diào)整執(zhí)行順序，或是禁止之前綁定的方法發(fā)生，可以通過重寫事件隊(duì)列的方式。

查看某個(gè)dom上已綁定事件的方法是
$._data(elem,"events") (jquery版本>1.7)。

elem 是 dom對(duì)象 而非 jquery對(duì)象 。

    function alertBottle(){
      $("body").on("click",function() { alert("1") });
      $("body").on("click",function() { alert("2") });
      $("body").on("click",function() { alert("3") });
    }
    
    // 點(diǎn)擊body會(huì)依次alert 1, 2, 3
    alertBottle();
    
    // 倒序執(zhí)行
    alertBottle();
    
    var Events = $._data($("body").get(0),"events");
    Events.click.sort(function(a,b){return b.guid-a.guid })   
    
    // 禁止執(zhí)行之前的一切， 只執(zhí)行我
    alertBottle();
    
    var Events = $._data($("body").get(0),"events");
    Events.click = null;
    $("body").on("click",function() { alert("4") });
    
    // 最先執(zhí)行我 alert 4, 1, 2, 3
    alertBottle();
    
    $("body").on("click",function() { alert("4") });
    var Events = $._data($("body").get(0),"events");
    var last = Events.click.pop();
    Events.click.unshift(last);

兼容jquery低版本的寫法是:

    $.fn.getEvents = function() {
        if (typeof(jQuery._data) == "function") {
            return jQuery._data(this.get(0), "events") || {};
        } else if (typeof(this.data) == "function") { // jQuery version < 1.7.?
            return this.data("events") || {};
        }
        return {};
    };
    
    // 使用
    $("body").getEvents();

參考資料：jquery中文文檔