章节
问答
课签
笔记
评论
占位
占位

体系结构

我们看看 jQuery 在针对事件的整个处理的过程,包括绑定执行到底都干了些什么,通过一个流程图我们大体的了解下。

jQuery事件的流程图,在绑定阶段与执行阶段:

(单击图片可放大)

以上是 jQuery 事件的整个结构流程图,右边是流程的一个简单实现,主要是用于理解,源码当然不是这么简单的,考虑代码量太多,有些机制是没有实现的,比如委托与原生事件的区分:

1. 通过 on 绑定事件,分析传递的数据,加工变成 add 能够识别的数据
2. 通过 add 把数据整理放到数据缓存中保存,通过 addEventListener 绑定事件
3. 触发事件执行 addEventListener 回调 dispatch 方法
4. 修正事件对象存在的问题,通过 fix 生成一个可写的事件对象
5. 引入 handlers 把委托和原生事件(例如"click")绑定区分对待
6. 执行数据缓存的事件回调,传入内部产生的事件对象

这样的好处:

  1. 因为事件对象是我们重写生成的,所以我们可以内部获取到状态值,比如是否冒泡,是否阻止默认行为。
  2. 通过事件的委托机制我们可以让原本不支持冒泡的元素也同样模拟出来,比如 blur,focus,具体怎么实现我们后面再讲解。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?