zepto 事件分析2($.on)
这里主要分析zepto事件中的$.on函数，先看一下该函数的代码
$.fn.on = function(event, selector, data, callback, one){
var autoRemove, delegator, $this = this
if (event && !isString(event)) {
//多个事件下的处理
$.each(event, function(type, fn){
$this.on(type, selector, data, fn, one)
})
return $this
}
//根据传入的参数初始化各个参数
//(event,data,callback)
if (!isString(selector) && !isFunction(callback) && callback !== false)
callback = data, data = selector, selector = undefined
//(event,selector,callback)
if (callback === undefined || data === false)
callback = data, data = undefined
//callback = function(){return false}
if (callback === false) callback = returnFalse
//迭代zepto对象中的元素
return $this.each(function(_, element){
if (one) autoRemove = function(e){
remove(element, e.type, callback)
return callback.apply(this, arguments)
}
//如果有传入选择器 定义一个delegator函数
if (selector) delegator = function(e){
//从触发事件目标出发找寻符合selector选择器的元素
var evt, match = $(e.target).closest(selector, element).get(0)
//如果存在并且不是element
if (match && match !== element) {
//对event对象进行转化操作
evt = $.extend(createProxy(e), {currentTarget: match, liveFired: element})
return (autoRemove || callback).apply(match, [evt].concat(slice.call(arguments, 1)))
}
}
add(element, event, callback, data, selector, delegator || autoRemove)
})
}
该函数主要分析的是return 后面的语句，在前面的分析中，分析了each函数和$对象，也就是对$对象中的每一个dom进行绑定事件，这里先跳过autoRemove函数，留在后面分析，如果有传入选择器，zepto先定义一个delegator函数，delegator函数中有一个match变量，该变量即为我们要绑定事件的目标元素，zepto采用的是事件委托，官方文档对于closest的定义如下：
而e.target即是事件触发的元素，注意：currentTarget和e.target是不同的。target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。
<body>
<div class="out">
<div class="in"><h2>1`</h2></div>
</div>
</html>
<script type="text/javascript"> function test2(e){
console.log(e.target);
console.log(e.currentTarget)
};
var box2 = document.getElementsByClassName('in')[0];
box2.addEventListener("click",test2);
当我们点击h2时，target指向<h2>,currentTarget指向<div class='in'>;
在获得match之后，判断其是否存在或是否为元素本身，如果是，则什么都不做，如果不是，则创建一个新的事件evt，并将原来的事件属性赋值给evt，并改变currentTarget和 liveFired的属性值。
其中有一个createProxy函数，该函数的功能即为复制属性。
function createProxy(event) {
var key, proxy = { originalEvent: event }
for (key in event)
if (!ignoreProperties.test(key) && event[key] !== undefined) proxy[key] = event[key]
return compatible(proxy, event)
}
createProxy函数最后返回的是一个compatible函数的执行，在之前分析$.Event就有遇到过，在这里来分析其作用。
function compatible(event, source) {
//如果没有传入source函数并且evnet事件阻止了默认操作，则直接返回传入的event参数
if (source || !event.isDefaultPrevented) {
source || (source = event)
$.each(eventMethods, function(name, predicate) {
var sourceMethod = source[name]
event[name] = function(){
this[predicate] = returnTrue
return sourceMethod && sourceMethod.apply(source, arguments)
}
event[predicate] = returnFalse
})
event.timeStamp || (event.timeStamp = Date.now())
//对其默认操作进行相关判断
if (source.defaultPrevented !== undefined ? source.defaultPrevented :
'returnValue' in source ? source.returnValue === false :
source.getPreventDefault && source.getPreventDefault())
event.isDefaultPrevented = returnTrue
}
return event
}
该函数最主要的代码在中间的$.each(...),可以先看一下eventMethods的定义
eventMethods = {
preventDefault: 'isDefaultPrevented',
stopImmediatePropagation: 'isImmediatePropagationStopped',
stopPropagation: 'isPropagationStopped'
}
在原生的事件属性中，也存在prereventDefault等方法以及判断其值的defaultPrevented属性，但在zepto中，每次绑定事件，实际上都相当于重新定义一个事件，而自我定义的属性是不具备prereventDefault等方法的功能，那么defaultPrevented的值也就失效了。如图：
function test2(e){
var evt = {};
for(key in evt)
evt[key] = e[key];
evt.preventDefault();
};
var box2 = document.getElementsByClassName('in')[0];
box2.addEventListener("click",test2);
所以compatible函数的作用就是为了使原生事件preventDefault等的方法以及判断其值的属性转变为一个方法来使用。
在delegator函数中，最后返回的是对绑定函数的执行。
最后on方法执行了一个add()函数，该函数留在下一篇分析。
zepto 事件分析2($.on)的更多相关文章
- zepto 事件分析1($.Event)
先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的. (function($){ ... ... })(Zepto) 在zepto事件函数中,主要为$ ...
- zepto 事件分析4(事件队列)
前面分析了zepto的事件绑定,接下来分析事件解绑,先看一下zepto中解绑的off方法: $.fn.off = function(event, selector, callback){ var $t ...
- zepto 事件分析3(add函数)
在上一篇的分析中,最后$.on方法返回了一个add方法函数的执行,在这里先看一下其代码: function add(element, events, fn, data, selector, deleg ...
- Zepto事件模块源码分析
Zepto事件模块源码分析 一.保存事件数据的handlers 我们知道js原生api中要移除事件,需要传入绑定时的回调函数.而Zepto则可以不传入回调函数,直接移除对应类型的所有事件.原因就在于Z ...
- 移动web app开发必备 - zepto事件问题
问题描述: 项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页 正常状态下: 用户在子元素上有交互动作时,默认状态下都是会冒泡到 ...
- OneAlert 入门（三）——事件分析
OneAlert 是国内首个 SaaS 模式的云告警平台,集成国内外主流监控/支撑系统,实现一个平台上集中处理所有 IT 事件,提升 IT 可靠性.有了 OneAlert,你可以更快更合理地为事件划分 ...
- OneAlert 入门（二）——事件分析
OneAlert 是国内首个 SaaS 模式的云告警平台,集成国内外主流监控/支撑系统,实现一个平台上集中处理所有 IT 事件,提升 IT 可靠性.有了 OneAlert,你可以更快更合理地为事件划分 ...
- 跨浏览器resize事件分析
resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera ...
- GridView事件分析
GridView事件分析 (转) P1默认数据绑定过程 编号 事件名称 作用 E1 DataBinding 数据绑定之前触发,在这个事件之前(第一次生成GridView),GridView不存在行数据 ...
随机推荐
- Java Web程序开发链接MySQL数据库
显示错误:Access denied for user ''@'localhost' (using password: YES) 保证URL中没有空格 尝试用MySQL本地命令行登陆 显示错误:The ...
- WSGI协议以及对服务器的影响
下面的内容纯属个人学习心得,如果对于我的观点有疑问,敬请留言,我将虚心向大牛学习. WSGI的全称是WEB SERVICE GATEWAY INTERFACE.WSGI 不是服务器,不是API,也不是 ...
- C# WebAPI系列(2)
上篇中简单介绍了一下WebApi,本章主要介绍一下Controller相关的知识. 在实际应用中,Controller是WebAPI的链接服务器和客户端的窗口.Controller的好坏影响整个系统的 ...
- Zookeeper在Linux平台Java开发环境配置（命令行）
1.安装必要软件 首先需要安装ant, automake, autoconf, cppunit.在ubuntu上可以直接用apt-get install安装 2.Build Zookeeper 切换到 ...
- cf Round#273 Div.2
题目链接,点击一下 Round#273 Div.2 ================== problem A Initial Bet ================== 很简单,打了两三场的cf第一 ...
- 逆水行舟 —— MyBatis
第一轮总结性笔记 这是一个很漫长的过程,我买了套课程,将在日后记录学习笔记,取名为逆水行舟系列 MyBatis的基础 根据MyBatis的官方介绍: 整个测试项目结构如下:使用Maven架构项目 po ...
- FineCMS 5.0.10 多个 漏洞详细分析过程
0x01 前言 已经一个月没有写文章了,最近发生了很多事情,水文一篇.今天的这个CMS是FineCMS,版本是5.0.10版本的几个漏洞分析,从修补漏洞前和修补后的两方面去分析. 文中的evai是特意 ...
- java继承多态和抽象类接口
一.继承 通过扩展一个已有的类,并继承该类的属性和行为,来创建一个新的类.已有的称为父类,新的类称为子类(父类派生子类,子类继承父类).(1)继承的优点: ①代码的可重用性: ②父类的属性 ...
- Java的BIO,NIO和AIO的区别于演进
作者:公众号:我是攻城师 前言 Java里面的IO模型种类较多,主要包括BIO,NIO和AIO,每个IO模型都有不一样的地方,那么这些IO模型是如何演变呢,底层的原理又是怎样的呢? 本文我们就来聊聊. ...
- Oracle sql共享池$sqlarea分析SQL资源使用情况
遇到需要排查一个系统使用sql的情况,可以通过查询Oracle的$sql.$ssssion.$sqlarea进行统计排查 排查时可以先看一下$sql和$session的基本信息 select * fr ...