zepto 事件分析2($.on)

这里主要分析zepto事件中的$.on函数，先看一下该函数的代码

$.fn.on = function(event, selector, data, callback, one){var autoRemove, delegator, $this = thisif (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] = returnTruereturn 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()函数，该函数留在下一篇分析。

转载于:https://www.cnblogs.com/Darlietoothpaste/p/6613720.html

zepto 事件分析2($.on)相关推荐

zepto 事件分析4(事件队列)
前面分析了zepto的事件绑定,接下来分析事件解绑,先看一下zepto中解绑的off方法: $.fn.off = function(event, selector, callback){var $th ...
Mocha BSM产品亮点——关联事件分析
业务需求与挑战企业经常会遇到下列场景: • 企业某应用,例如,WebSphere Portal Server,已经不可用,是由于应用自身已不可用?还是应用所连接的数据库出了问题?还是应用的LDAP服 ...
Zepto源代码分析之二~三个API
因为时间关系:本次仅仅对这三个API($.camelCase.$.contains.$.each)方法进行分析第一个方法变量转驼峰:$.camelCase('hello-world-welcome' ...
重新定义分析 - EventBridge实时事件分析平台发布
作者:肯梦对于日志分析大家可能并不陌生,在分布式计算.大数据处理和 Spark 等开源分析框架的支持下,每天可以对潜在的数百万日志进行分析. 事件分析则和日志分析是两个完全不同的领域,事件分析对实时 ...
选了combobox里的选项后没激发change事件_stata 事件分析法
前言: 因为一些原因,国庆节期间学的.学习过程很酸爽,自己并没有很多统计学及其相关软件的经验,网上相关资料也不是很多.我在微信公众号.知网.经管之家.B站.百度文库等很多平台找了各式的资料来学(花了7 ...
移动web app开发必备 - zepto事件问题
问题描述: 项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页正常状态下: 用户在子元素上有交互动作时,默认状态下都是会冒泡到 ...
针对巴基斯坦的某APT活动事件分析
本文讲的是针对巴基斯坦的某APT活动事件分析, 事件背景 2017年6月,360威胁情报中心发现了一份可疑的利用漏洞执行恶意代码的Word文档,经过分析后,我们发现这有可能是一起针对巴基斯坦的政府官员 ...
跨浏览器resize事件分析
resize事件原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera ...
【权威发布】360天眼实验室：Xshell被植入后门代码事件分析报告（完整版）
本文由安全客原创发布,如需转载请注明来源及本文地址. 本文地址:http://bobao.360.cn/learning/detail/4278.html 文档信息事件概要事件简述近日,非常 ...

zepto 事件分析2($.on)

zepto 事件分析2($.on)相关推荐

最新文章

热门文章