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⭐️，对作者也是一种鼓励。