可想实现一个自己的简单jQuery库?(九)
Lesson-8
事件机制
在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理).
只有必须先明白了如何实现一个事件委托,我们才能更好的去实现on和off.在我看来,on和off里最难实现的就是他的事件委托.
function delegate(agent,type,selector,fn) {
agent.addEventListener(type,function(e) {
var target = e.target;
var ctarget = e.currentTarget;
var bubble = true;
while(bubble && target != ctarget) {
if(filiter(agent,selector,target)) {
bubble = fn.call(target,e);
}
target = target.parentNode;
return bubble;
}
},false);
function filiter(agent,selector,target) {
var nodes = agent.querySelectorAll(selector);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i] == target) {
return true;
}
}
}
}
以上是我对整个委托的实现,当然在这只做了非常简单的实现,没有对很多别的情况进行判断,也没有多个参数是否捕捉.
我们先拆解下分析.
function filiter(agent,selector,target) {
var nodes = agent.querySelectorAll(selector);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i] == target) {
return true;
}
}
}
先看这个方法,这其实就是一个元素过滤,作用就是为了过滤出我们委托的元素具体是谁.target就是我们具体的委托元素
agent.addEventListener(type,function(e) {
var target = e.target;
var ctarget = e.currentTarget;
var bubble = true; //是否阻止冒泡
while(bubble && target != ctarget) {
if(filiter(agent,selector,target)) {
bubble = fn.call(target,e);
}
target = target.parentNode;
return bubble;
}
},false);
然后是我们的主要部分.其实这里就很简单,while的条件判断两个,第一个是是否阻止冒泡,第二个判断是冒泡是否到顶.
接着我们进行filiter进行过滤,如果返回true,则是我们的委托元素,直接call即可.
如果不做过多的兼容处理,实现一个委托还是比较容易的.
PS:如果您还是不太明白,可以来这看更具体的解释.http://www.meckodo.com/?p=309
您的star是检验代码的唯一标准!:)
github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-8
可想实现一个自己的简单jQuery库?(八):http://segmentfault.com/a/1190000004025152
可想实现一个自己的简单jQuery库?(九)的更多相关文章
- 可想实现一个自己的简单jQuery库?(五)
Lesson-4 这个版本我们要增加一个用的非常多的方法! 那就是each! 我们知道each不仅能遍历数组,还能遍历对象. 首先我们需要一个对数组进行验证的方法 function isArray(o ...
- 前端开发:一个开源、简单易用的jQuery表格插件(DataTables)
DataTables是一个基于jQuery库的开源(MIT协议)表格插件,支持添加.排序.分页.搜索.过滤等功能,使用简单.广受欢迎,能够与主流前端UI整合(如bootstrap.jQuery UI等 ...
- JQCloud: 一个前端生成美化标签云的简单JQuery插件
本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html 因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件. 官网地址 ...
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- 你想建设一个能承受500万PV/每天的网站吗?服务器每秒要处理多少个请求才能应对?
你想建设一个能承受500万PV/每天的网站吗?服务器每秒要处理多少个请求才能应对? 你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算 ...
- 你想建设一个能承受500万PV/每天的网站吗?
(如果感觉有帮助,请帮忙点推荐,添加关注,谢谢!你的支持是我不断更新文章的动力.本博客会逐步推出一系列的关于大型网站架构.分布式应用.设计模式.架构模式等方面的系列文章) 你想建设一个能承受500万P ...
- 你想建设一个能承受500万PV/每天的网站吗?如果计算呢?(转)
作者:赵磊 博客:http://elf8848.iteye.com 你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算呢? PV是什么 ...
- [置顶] 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- 瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox! 前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...
随机推荐
- c# winform中TabControl中给每个选项卡添加不同的图标(图片)
在一个TabControl控件中,有几个选项卡,现在在每个选项卡上显示不同的图标. 1:你要现在form窗体中通过工具箱加入一个imagelist,名字为imagelist1,如下图: 2:然后在里面 ...
- kubernetes StatefulSet控制器
想学习更多相关知识请看博主的个人博客地址:https://blog.huli.com/ https://blog.huli.com/ 在Kubernetes系统中,Pod的管理对象RC.Deploym ...
- 如何使用 PuTTY 远程连接矩池云主机
PuTTY 是一款开源的连接软件,用来远程连接服务器,支持 SSH.Telnet.Serial 等协议. 矩池云的主机支持 SSH 登录,以下为使用 PuTTY 连接矩池云 GPU 的使用教程. 如您 ...
- 前端工程化:使用 shelljs 生成 yapi 接口文件
之前的文章介绍了使用 yapi-to-typescript (下文简称 ytt)生成接口类型定义文件,方便我们直接使用接口的请求和响应类型,能减少很多写接口类型的时间. 使用 yapi-to-type ...
- C/C++ 大型工程工具链搭建
一.配置环境要求 C/C++ 编译器 此项有系统区别,如果是 Windows 平台,那么可以下载 VS2022 社区版,它自带 MSVC 编译器.如果嫌它太笨重,也可以直接下载 MSVC 再发行组件. ...
- WebGL 与 WebGPU比对[6] - 纹理
目录 1. WebGL 中的纹理 1.1. 创建二维纹理与设置采样参数 1.2. 纹理数据写入与拷贝 1.3. 着色器中的纹理 1.4. 纹理对象 vs 渲染缓冲对象 1.5. 立方体六面纹理 1.6 ...
- STP详解-STP、RSTP、MSTP
STP详解 01 冗余链路中存在的问题 如图所示LSW1和LSW2之间有两条线路相连,它们之间任何一条链路出现故障另外一条线路可以马上顶替出现故障的那条链路,这样可以很好的解决单链路故障引起的网络中断 ...
- kubernetes如何强制删除namespace
K8S如何强制删除namespace 先运行kubectl get namespace ingress-nginx -o json > nginx.json,拿到当前namespace描述,然后 ...
- Arcgis 离线部署api 4.x的两种本地部署方法!
引言:本文用的是api4.6版本 方法一 拷贝api进去tomcat服务器用绝对地址引用 首先将下载好的api放入Tomcat服务中的Webapp下: 1 可以打开下载好的的 api46/arcg ...
- Python之VSCode
在学习Python的过程中,一直没有找到比较趁手的第三方编辑器,用的最多的还是Python自带的编辑器.由于本人用惯了宇宙第一IDE(Visual Studio),所以当Visual Studio C ...