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