可想实现一个自己的简单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! 前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...
随机推荐
- omnet++:用到的方法和语句
1.方法 方法 说明 msg->getName() 获取发送的消息名 uniform(a,b) 生成[a,b]间的随机实数 intuniform(a,b) 生成[a,b]间的随机整数 expon ...
- 网络爬虫深究-初识HTTP和https常识
网络爬虫专题--HTTP基本原理 URI和URL.URN的关系 超文本 HTTP和HTTPS URI和URL 首先,我们来了解一下URI和URL,URI,即统一资源标志符,URL,即统一资源定位符. ...
- DateTime TryParse方法,介绍
1.与Date.Parse()方法的区别:Date.Parse(object o)方法接受一个object类型的参数,当参数为空或转换失败时会抛出异常DateTime.TryParse方法不会抛出异常 ...
- appium ios 相对坐标点击和控件滑动操作
环境: 系统:ios 10.13.6 (17G12034) appium:1.14.0 xcode:10.1 iphone:iphone7 12.4 在尝试使用driver.tap([(a,b)],5 ...
- CS61b proj1a
得分46.25有一个点的bug不会修(希望大佬带我),style没有注意.1.LinkedListDeque.java public class LinkedListDeque <T>{ ...
- 微信小程序yansongda 支付宝测试
小程序支付接入文档 1:php 框架composer 安装yansongda插件 composer require yansongda/pay:^2.10 -vvv 2:支付宝沙箱支付获取自己Appi ...
- BBS项目分布搭建二(个人站点相关)
BBS项目分布搭建二 1. 首页详情补充 # 在home.html文件中 body标签内补充: <div class="container-fluid"> <di ...
- netty系列之:netty中各不同种类的channel详解
目录 简介 ServerChannel和它的类型 Epoll和Kqueue AbstractServerChannel ServerSocketChannel ServerDomainSocketCh ...
- LGP2490题解
有点儿神秘? 根据他这个题意说的,白子向右的第一个一定是对应的黑子啊. 所以棋子的绝对位置是不重要的,我们只需要考虑白子和黑子的相对位置,然后考虑用 GF 来拼凑状态就好了. 下面的 \(k\) 是题 ...
- MySQL8.0降级安装5.7
本文旨在自我学习使用,如有任何疑问请及时联系博主 前言 基于OpenHarmony的FA数字管家服务端 默认情况下,Ubuntu20.04安装MySQL的版本为8.0.但8.0更加严格的加密规则,使得 ...