zepto 事件分析3(add函数)】的更多相关文章

在上一篇的分析中,最后$.on方法返回了一个add方法函数的执行,在这里先看一下其代码: function add(element, events, fn, data, selector, delegator, capture){ var id = zid(element), set = (handlers[id] || (handlers[id] = [])) events.split(/\s/).forEach(function(event){ if (event == 'ready') r…
这里主要分析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…
前面分析了zepto的事件绑定,接下来分析事件解绑,先看一下zepto中解绑的off方法: $.fn.off = function(event, selector, callback){ var $this = this if (event && !isString(event)) { $.each(event, function(type, fn){ $this.off(type, selector, fn) }) return $this } if (!isString(selecto…
先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的. (function($){ ... ... })(Zepto) 在zepto事件函数中,主要为$.Event,$.on,$.off等,分析事件代码,分析这三个就够了,首先分析$.Event函数,在分析该函数之前,从接口文档中大概知道这是一个创建事件的方法,可以先看一下原生的javascript代码是怎么生成一个事件的. var event = new Event('event'); //老式创…
Zepto事件模块源码分析 一.保存事件数据的handlers 我们知道js原生api中要移除事件,需要传入绑定时的回调函数.而Zepto则可以不传入回调函数,直接移除对应类型的所有事件.原因就在于Zepto在绑定事件时,会把相关的数据都保存到handlers对象中,因此就可以在这个变量中查找对应事件的回调函数,来移除事件. handlers对象的数据格式如下: { 1: [ // handlers的值为DOM元素的_zid { del: function() {}, // 实现事件代理的函数…
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventListener(event, function, useCapture) event:事件名,例如“click”,这里要提醒的一点是不要加前缀“on”;    function:事件触发时执行的函数;    userCapture:默认为false,表示event事件在冒泡阶段触发.如果设置为true,则…
问题描述: 项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页 正常状态下: 用户在子元素上有交互动作时,默认状态下都是会冒泡到祖先元素响应 特定情况下: 子元素单独绑定了事件 特性情况下需要阻止全局事件 常规的做法就是stopPropagation阻止即可 但如果子元素绑定的是 click,touchmove,touchend这类事件的话,问题就来了 全局的touchstart事件也会被冒泡触发 发一段项目图: /** *…
目录 目录 1 1. 前言 1 2. 调用路径 2 3. MAX_PACKET_LENGTH宏 2 4. DBUG_RETURN宏 3 5. COM_QUERY枚举值 3 6. mysql_query函数 3 7. mysql_real_query函数 3 8. mysql_send_query函数 4 9. simple_command宏 5 10. MYSQL_METHODS结构体 5 11. cli_advanced_command函数 6 12. int3store函数 7 13. ne…
今天抽出时间复习了一下Zepto的源代码,依照自己的理解进行凝视. 欢迎大家拍砖. 源代码版本号:v1.1.4 源代码下载地址:http://zeptojs.com/ 分析总体代码之后,整理出架构图: 本次仅仅针对获取核心方法$()进行拨离,并用demo測试api. var Zepto = (function() { // 变量初始化 var $; var zepto = {}; var fragmentRE = /^\s*<(\w+|!)[^>]*>/; var singleTagRE…
因为时间关系:本次仅仅对这三个API($.camelCase.$.contains.$.each)方法进行分析 第一个方法变量转驼峰:$.camelCase('hello-world-welcome'); 源代码: var camelize; /**  * 字符串替换  * 使用replace第二个參数带回调  */ camelize = function(str) {      return str.replace(/-+(.)?/g,           function(match, ch…