jQuery源碼剖析(五) - 事件綁定原理剖析

jQuery 源碼解析代碼及更多學習乾貨: 猛戳GitHub

本篇代碼爲 my-jQuery 1.0.5.js

1、基礎知識

1.DOM 0級事件模型: 經過JS指定事件處理程序傳統方式,就是將一個函數賦值爲一個事件處理程序屬性。onclick

2.DOM 2級事件模型:規定的事件流包括3個階段:事件捕獲階段、處於目標階段和時間冒泡階段,首先發生的是事件捕獲,而後處於目標階段,最後是事件冒泡。

addEventListener(),該方法接受三個參數
(1)處理事件的名稱
(2)事件處理程序
(3)一個指定實在事件冒泡仍是事件捕獲階段處理的布爾值。true則爲在事件捕獲階段處理;false(默認)爲在事件冒泡階段處理.

3.事件委託:是指利用事件冒泡,只指定一個事件處理程序來管理某一類型的全部事件,能夠達到提高總體運行的性能。本質是DOM的內層結構能夠經過包含的外層結構經過代理的方式來觸發。

4.bind
語法:\$(select).bind(event,data,function)
bind()方法爲被選元素添加一個或多個事件處理程序,並規定事件發生時運行的函數。

5.delegate
語法:delegate()方法爲被選元素的子元素,添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。

6.on
$(selector).on(event,child,data,function)
定義和用法:(1)on()方法在被選元素及子元素上添加一個或多個事件處理程序.自jQuery v1.7起on()方法是bind()和delegate()方法的新的替代品,推薦使用該方法。

2、開始剖析源碼

首先咱們要搞明白jQuery事件處理機制爲咱們解決了那些問題?
(1)首先解決的是瀏覽器的兼容性問題
(2)一個事件類型添加多個事件函數,一個添加多個事件類型的處理函數
(3)簡潔定義方式
(4)能夠自定義事件

經常使用寫法:
(1)多個事件綁定同一個函數

$('#id').on("mouseover mouseout",function(){

    console.log("hello");
})
複製代碼

(2)多個事件綁定不一樣函數

$("#id").on({
    mouseover:function(){
        $("body").css("background-color","red");
    },
    mourseout:function(){
        $("body").css("background-color","yellow");
    },
    click:function(){
        $("body").css("background-color","black");
    }
});
複製代碼

(3)自定義事件

$("#id").on("myOwnEvent",function(event,showName){

    console.log("hello");
});
$("#id").trigger("myOwnEvent",["james"]);
複製代碼

3、jQuery事件設計原型

上圖很清晰的展示出了jQuery的事件綁定原型鏈,具體的實現思路是:

(1).給jQuery對外擴展個on方法
(2).定義一個事件event方法,給event定義add,dispath,fix,及handlers方法
(3)最後經過傳入的事件函數,綁定相關的響應事件類型,處理函數

具體代碼參照my-jQuery 1.0.5.js 點我下載

其餘

jQuery 源碼剖析 系列預計寫十篇左右，旨在加深對原生JavaScript 部分知識點的理解和深刻，重點講解 jQuery核心功能函數、選擇器、Callback 原理、Deferred延時對象原理、事件綁定、jQuery體系結構、委託設計模式、dom操做、動畫隊列等。 若是有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。若是喜歡或者有所啓發，歡迎 star⭐️，對做者也是一種鼓勵。