jQuery原始碼剖析(五) - 事件繫結原理剖析

極客James發表於2019-07-27
jQuery原始碼事件

jQuery 原始碼解析程式碼及更多學習乾貨: 猛戳GitHub

本篇程式碼為 my-jQuery 1.0.5.js

一、基礎知識

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()方法的新的替代品,推薦使用該方法。

二、開始剖析原始碼

首先我們要搞明白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"]);
複製程式碼

三、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⭐️，對作者也是一種鼓勵。

相關文章