zoukankan      html  css  js  c++  java
  • 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函数,知道返回的是事件就好了。

           

  • 相关阅读:
    jquery Table基础操作
    window.opener
    CSS基础
    CSS样式
    CSS框架
    常用正则表达式
    HTML字体对应word字体
    SQL获取所有数据库名、表名、储存过程以及参数列表
    SQL集合运算:差集、交集、并集
    sql数据分页
  • 原文地址:https://www.cnblogs.com/Darlietoothpaste/p/6613543.html
Copyright © 2011-2022 走看看