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