zepto 事件分析1($.Event)

先看一下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函数,知道返回的是事件就好了。

       

时间: 2024-11-02 21:39:09

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

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

跨浏览器resize事件分析

resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera 触发1次 Safari 触发1次 场景分析 window resize时,部分组件需要重置大小(一次):部分组件不需要重置大小: 开源库分析 jquery-resize 优点:使用简便 $('#div1').on('resize', function (e) { console.log('[div1

事件总线(Event Bus)

事件总线(Event Bus)知多少 源码路径:Github-EventBus简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集中式事件处理机制,允许不同的组件之间进行彼此通信而又不需要相互依赖,达到一种解耦的目的. 我们来看看事件总线的处理流程: 了解了事件总线的基本概念和处理流程,下面我们就来分析下如何去实现事件总线. 2.回归本质 在动手实现事件总线之前,我们还是要追本溯源,探索一下

jQuery源码解读-事件分析

最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventListener(event, function, useCapture) event:事件名,例如“click”,这里要提醒的一点是不要加前缀“on”;    function:事件触发时执行的函数;    userCapture:默认为false,表示event事件在冒泡阶段触发.如果设置为true,则

DuiLib事件分析(一)——鼠标事件响应

最近在处理DuiLib中自定义列表行元素事件,因为处理方案得不到较好的效果,于是只好一层一层的去剥离DuiLib事件是怎么来的,看能否在某一层截取消息,自己重写. 我这里使用CListContainerElementUI行元素,元素中有插入button,平时行元素不显示,鼠标移动上去显示出来,鼠标移走就隐藏button.Duilib自己是不带这个功能的,它有一个鼠标移动上去的热点事件,按理说重写热点事件就好了.但是当时比较急没找到怎么触发的,之后一直没继续走这条思路.后来找到源码事件里面有 vo

【Android 1.6】View和ViewGroup的touch事件分析和总结

ENV: android 1.6 目前Android版本已经到了7.0(nougat)了,Android 随着版本升级,touch事件的源码也在跟随着系统的升级而写得越来越复杂,加入了很多旁枝末节,这些旁枝末节,对于分析流程是一种干扰:由于Android的版本升级是向下兼容的,万变不离其宗,研究Android早期的版本,可以更容易理解touch事件的分发,本篇以Android1.6版本的源码进行讲解,由简及繁,理解了早期的源码,再进入高版本的研究也会更容易许多. 前言: View事件的派发其实非

Javascript冒泡事件分析

在javascript的dom操作做肯定会遇到js的冒泡事件,最常见的是div弹窗事件如图解 当点击灰色部分是弹窗消失,点击黑色部分时没有效果. 通过下面一段代码来分析js的冒泡事件 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js冒泡事件</title> <link rel=&

事件轮询 event loop

Understanding the node.js event loop The first basic thesis of node.js is that I/O is expensive: So the largest waste with current programming technologies comes from waiting for I/O to complete. There are several ways in which one can deal with the

Android中Preference的使用以及监听事件分析

> 在Android系统源码中,绝大多数应用程序的UI布局采用了Preference的布局结构,而不是我们平时在模拟器中构建应用程序时使用的View布局结构,例如,Setting模块中布局.当然,凡事都有例外,FMRadio应用程序中则使用了View布局结构(可能是该应用程序是marvel公司提供的,如果由google公司做,那可说不准).归根到底,Preference布局结构和View的布局结构本质上还是大同小异,Preference的优点在于布局界面的可控性和高效率以及可存储值的简洁性(每个