先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的。

(function($){
...
...
})(Zepto)

在zepto事件函数中,主要为$.Event,$.on,$.off等,分析事件代码,分析这三个就够了,首先分析$.Event函数,在分析该函数之前,从接口文档中大概知道这是一个创建事件的方法,可以先看一下原生的javascript代码是怎么生成一个事件的。

var event = new Event('event');
//老式创建event
//var event = document.createEvent('event');
event.initEvent('event',true,true);
console.log(event); 

Js中创建event事件的方式有两种,分别为 new Event()和document.createEvent.创建event之后,需要对其进行初始化,即调用event.initEvent('event',true,true);该方法的三个参数合成 Event 对象的 type 属性、bubbles 属性和 cancelable 属性。(后两个属性分别是是否可以冒泡,是否可以阻止默认事件)。

回过头来看zepto中的函数,

$.Event = function(type, props) {
if (!isString(type)) props = type, type = props.type
var event = document.createEvent(specialEvents[type] || 'Events'), bubbles = true
if (props) for (var name in props) (name == 'bubbles') ? (bubbles = !!props[name]) : (event[name] = props[name])
event.initEvent(type, bubbles, true)
return compatible(event)
}

该函数传入两个参数,分别为事件的type属性和其他另外加入的属性,函数中在创建事件event时,有一个specialEvents,在zepto中,其存放的是鼠标事件

specialEvents.click = specialEvents.mousedown = specialEvents.mouseup = specialEvents.mousemove = 'MouseEvents'

接着的内容和上面原生创建事件的代码差不多,最后返回事件属性,在这里,暂时不分析compatible函数,知道返回的是事件就好了。

       

zepto 事件分析1($.Event)的更多相关文章

  1. zepto 事件分析2($.on)

    这里主要分析zepto事件中的$.on函数,先看一下该函数的代码 $.fn.on = function(event, selector, data, callback, one){ var autoR ...

  2. zepto 事件分析4(事件队列)

    前面分析了zepto的事件绑定,接下来分析事件解绑,先看一下zepto中解绑的off方法: $.fn.off = function(event, selector, callback){ var $t ...

  3. zepto 事件分析3(add函数)

    在上一篇的分析中,最后$.on方法返回了一个add方法函数的执行,在这里先看一下其代码: function add(element, events, fn, data, selector, deleg ...

  4. Zepto事件模块源码分析

    Zepto事件模块源码分析 一.保存事件数据的handlers 我们知道js原生api中要移除事件,需要传入绑定时的回调函数.而Zepto则可以不传入回调函数,直接移除对应类型的所有事件.原因就在于Z ...

  5. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  6. jQuery源码解读-事件分析

    最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...

  7. 跨浏览器resize事件分析

    resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera ...

  8. 事件总线(Event Bus)

    事件总线(Event Bus)知多少 源码路径:Github-EventBus简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对 ...

  9. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)

    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...

随机推荐

  1. 洛谷P1443 马的遍历

    https://www.luogu.org/problemnew/show/P1443 很经典的搜索题了,蒟蒻用广搜打的 不说了,上代码! #include<bits/stdc++.h> ...

  2. cv2.cvtColor Unsupported depth of input image

    源代码 import cv2 import numpy as ny img = ny.zeros( ( 3 , 3 )) img=cv2.cvtColor(img,cv2.COLOR_BGR2RGB) ...

  3. Python爬虫学习之正则表达式爬取个人博客

    实例需求:运用python语言爬取http://www.eastmountyxz.com/个人博客的基本信息,包括网页标题,网页所有图片的url,网页文章的url.标题以及摘要. 实例环境:pytho ...

  4. Java定时任务解决方案

    很多项目中都会遇到需要定时任务的情况,本篇文章就结合了Spring中以及SpringBoot.SpringCloud中定时任务的解决方案. 在Spring中使用定时器 用SpringBoot比较多的同 ...

  5. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  6. 深入理解java中的底层阻塞原理及实现

    谈到阻塞,相信大家都不会陌生了.阻塞的应用场景真的多得不要不要的,比如 生产-消费模式,限流统计等等.什么 ArrayBlockingQueue, LinkedBlockingQueue, Delay ...

  7. DevOps - 参考信息

    DevOps DevOps(Development+Operations)强调共同对业务目标负责,以实现用户价值作为唯一的评判标准:保证产品功能及时实现.成功部署和稳定使用: 是一种重视软件开发人员( ...

  8. 超声波手势识别(STM32四路超声波获取)

    超声波手势识别在市场上已经有见实现,但研究其传感器发现并不是市场上随意可见的,如果暂且考虑成本,该如何入门实现简单的手势识别呢.聊天中老师给出一个很好的提议,就是固定四个超声波,分别为上下左右,然后进 ...

  9. SpringDataJPA与Mybatis的优异性

    首先表达个人观点,JPA必然是首选的. 个人认为仅仅讨论两者使用起来有何区别,何者更加方便,不足以真正的比较这两个框架.要评判出更加优秀的方案,我觉得可以从软件设计的角度来评判.个人对 mybatis ...

  10. ASP.NET Core 2.1 使用Docker运行

    重要提示,本文为 ASP.NET Core 2.1 如果你是 2.2 那么请将文中的镜像换为 microsoft/dotnet:2.2.0-aspnetcore-runtime 即可,其他操作一样 1 ...