【zepto学习笔记03】事件机制
2013-11-29 00:14
471 查看
前言
我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习
zepto事件处理部分篇幅不大,不到400行,前面篇幅也很小,所以真的很适合移动开发
变量定义
var $$ = $.zepto.qsa, handlers = {}, _zid = 1, specialEvents = {}, hover = { mouseenter: 'mouseover', mouseleave: 'mouseout' }
事件部分首先定义了几个变量,$$为zepto选择器的方法,暂时不管他(据观察,好像也没有地方用到了,所以无意义)
handlers为一个对象,与_zid息息相关,暂时不知道干什么的(据猜测两个应该是保存函数句柄,为removeEvent做准备)
hover应该会同时触发两个事件才会触发,我们这里先不管,继续往下看
这里提供一个zid飞方法,该方法用于保证-zid的唯一性
function zid(element) { return element._zid || (element._zid = _zid++) }
算了,我们这里还是用一个实际点的方法跟进来吧,首先说一个关键的
$.Event(type, [properties])
这个方法比较关键,他可以创建一个dom事件,我们可以使用他来扩展新的事件对象,默认情况事件是可以冒泡的,可以设置这个事件可以通过trigger触发
PS:trigger与Event是关键,各位一定要搞懂
specialEvents = {} specialEvents.click = specialEvents.mousedown = specialEvents.mouseup = specialEvents.mousemove = 'MouseEvents' //根据参数创建一个event对象 $.Event = function (type, props) { //当type是个对象时 if (typeof type != 'string') props = type, type = props.type //创建一个event对象,如果是click,mouseover,mouseout时,创建的是MouseEvent,bubbles为是否冒泡 var event = document.createEvent(specialEvents[type] || 'Events'), bubbles = true //确保bubbles的值为true或false,并将props参数的属性扩展到新创建的event对象上 if (props) for (var name in props) (name == 'bubbles') ? (bubbles = !!props[name]) : (event[name] = props[name]) //初始化event对象,type为事件类型,如click,bubbles为是否冒泡,第三个参数表示是否可以用preventDefault方法来取消默认操作 event.initEvent(type, bubbles, true, null, null, null, null, null, null, null, null, null, null, null, null) //添加isDefaultPrevented方法,event.defaultPrevented返回一个布尔值,表明当前事件的默认动作是否被取消,也就是是否执行了 event.preventDefault()方法. event.isDefaultPrevented = function () { return this.defaultPrevented } return event }
这个方法的第二个参数我一般没看到出现,有时候我们可能会直接传入一个事件对象作为参数,所以我们这个时候第二个参数要保存第一个对象参数
并将type获得,type还是必须是一个字符串
然后此处创建了一个事件对象:
var event = document.createEvent(specialEvents[type] || 'Events'),
createEvent
Event对象的属性提供了有关事件的细节(比如事件发生到什么元素上),并且Event对象可以控制事件传播PS:IE这个家伙我已经不愿意去关注他了,标准事件模型中,Event对象会传递给句柄函数,但是IE会保存到window.event 中
Event具有以下属性:
event.bubbles
事件冒泡类型,是冒泡则为true,非冒泡就是false事件传播分为三个阶段:
① 捕获阶段,事件由dom对象沿着文档树向下传播给目标节点,如果目标元素(或者parent)注册了事件,那么在事件传播过程中会执行
② 此阶段发生在目标节点自身,直接注册到目标上的适合事件会运行(比如本来要触发click,如果注册了mousedown也会运行)
③ 冒泡阶段,此阶段事件从目标元素向上传播到冒泡元素或者document
所以我们在我们的回调函数中打印event.bubbles,如果是true的话,就说明是冒泡执行的事件
cancelable
该属性与我们的preventDefault有很大关联,事实上,preventDefault就是将该属性设置为false(也许吧......)event.currentTarget
该属性返回监听事件的节点,即当前处理该事件的元素,在冒泡或捕获阶段,该元素比较有用比如我们将事件绑定到了div上,但是我们是点击里面的span而触发了div上面的事件,这个div就是currentTarget了
eventPhase
eventPhase 属性返回事件传播的当前阶段。它的值是下面的三个常量之一,它们分别表示捕获阶段、正常事件派发和起泡阶段event.targettarget
事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。以上面的例子为例,此时的target就是我们的span了
event.timeStamp
该属性,返回事件生成的日期event.type
type 事件属性返回发生的事件的类型,即当前 Event 对象表示的事件的名称。它与注册的事件句柄同名,或者是事件句柄属性删除前缀 "on" 比如 "submit"、"load" 或 "click"。
这里比较关键了,如果我们想注册自己的事件,比如tap,就可以这么干了,好了继续我们的话题
event.stopPropagation()
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。event.preventDefault()
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。比如,我们点击一个input时候在手机上会弹出键盘,我们如果使用e.preventDefault();就不会弹出
event.initEvent(eventType,canBubble,cancelable)
initEvent() 方法初始化新事件对象的属性。该方法必须在dispatchEvent调用前执行才有效
PS:其实不止initEvent方法,还有initMouseEvent方法,这个方法还会提供鼠标坐标
/* typeArg - 指定事件类型。 canBubbleArg - 指定该事件是否可以 bubble。 cancelableArg - 指定是否可以阻止事件的默认操作。 viewArg - 指定 Event 的 AbstractView。 detailArg - 指定 Event 的鼠标单击量。 screenXArg - 指定 Event 的屏幕 x 坐标 screenYArg - 指定 Event 的屏幕 y 坐标 clientXArg - 指定 Event 的客户机 x 坐标 clientYArg - 指定 Event 的客户机 y 坐标 ctrlKeyArg - 指定是否在 Event 期间按下 control 键。 altKeyArg - 指定是否在 Event 期间按下 alt 键。 shiftKeyArg - 指定是否在 Event 期间按下 shift 键。 metaKeyArg - 指定是否在 Event 期间按下 meta 键。 buttonArg - 指定 Event 的鼠标按键。 relatedTargetArg - 指定 Event 的相关 EventTarget。 */ clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
这个方法的应用我们后面点会涉及,这里暂时就不管他了,这里回到我们的Event方法
他这里根据传入参数(type),创建了一个Event对象,此处的props如果是对象,那么就将赋给新建的Event对象
然后使用initEvent初始化了我们Event参数的属性,并且添加了isDefaultPrevented方法,该方法可以知道当前事件的默认动作是否取消
然后将这个对象返回
既然都到了这里,我们来自定义一个鼠标事件吧
自定义鼠标事件
我们知道在移动端的click事件响应很慢,所以我们这里自己来实现一个fastclick的事件来替换本身的clickhttp://sandbox.runjs.cn/show/scbpb0xg
请使用手机测试点击相应速度
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> <script src="../../zepto.js" type="text/javascript"></script> </head> <body> <input type="button" value="我是普通点击事件" id="click" /> <input type="button" value="我是快速点击事件" id="fastclick" /> </body> <script type="text/javascript"> var c = $('#click'); var fc = $('#fastclick'); var t = new Date().getTime() $(document).bind('touchstart', function (e) { t = e.timeStamp; }); $(document).bind('touchend', function (e) { var event = $.Event('fastclick'); //这里为了方便而已,其实该e.target fc[0].dispatchEvent(event); }); c.bind('click', function (e) { $(this).val('我是普通点击事件' + '(' + (e.timeStamp - t) + ')') }); fc.bind('fastclick', function (e) { $(this).val('我是快速点击事件' + '(' + (e.timeStamp - t) + ')') }) </script> </html>
我们这里为第二个按钮定义了一个fastclick事件,然后在touchend时候触发了该dom的事件
大家点击时候自己就可以看到响应的速度(请使用手机测试)
PS:这里各位一定要对dispatchEvent了解哦
好了,我们继续回到我们的代码
trigger/triggerHandler(event, [data])
这个trigger和dispatchEvent有莫大的关系,通过他我们可以触发一个事件,比如上面自定义事件可以通过他触发,我们看看他的源码$.fn.trigger = function (event, data) { if (typeof event == 'string' || $.isPlainObject(event)) event = $.Event(event) fix(event) event.data = data return this.each(function () { // items in the collection might not be DOM elements // (todo: possibly support events on plain old objects) if ('dispatchEvent' in this) this.dispatchEvent(event) }) }
他这里有个fix方法用于修复event对象,
function fix(event) { if (!('defaultPrevented' in event)) { event.defaultPrevented = false //初始值false var prevent = event.preventDefault // 引用默认preventDefault event.preventDefault = function () { //重写preventDefault this.defaultPrevented = true prevent.call(this) } } }
修复后,他就遍历我们包装的dom集合,然后依次触发该事件
triggerHandler
下面有一个triggerHandler事件与他相似,但是不会冒泡//触发元素上绑定的指定类型的事件,但是不冒泡 $.fn.triggerHandler = function (event, data) { var e, result this.each(function (i, element) { e = createProxy(typeof event == 'string' ? $.Event(event) : event) e.data = data e.target = element //遍历元素上绑定的指定类型的事件处理函数集,按顺序执行,如果执行过stopImmediatePropagation, //那么e.isImmediatePropagationStopped()就会返回true,再外层函数返回false //注意each里的回调函数指定返回false时,会跳出循环,这样就达到的停止执行回面函数的目的 $.each(findHandlers(element, event.type || event), function (i, handler) { result = handler.proxy(e) if (e.isImmediatePropagationStopped()) return false }) }) return result }
这里有个findHandlers方法,我们来看看
//查找绑定在元素上的指定类型的事件处理函数集合 function findHandlers(element, event, fn, selector) { event = parse(event) if (event.ns) var matcher = matcherFor(event.ns) return (handlers[zid(element)] || []).filter(function (handler) { return handler && (!event.e || handler.e == event.e) //判断事件类型是否相同 && (!event.ns || matcher.test(handler.ns)) //判断事件命名空间是否相同 //注意函数是引用类型的数据zid(handler.fn)的作用是返回handler.fn的标示符,如果没有,则给它添加一个, //这样如果fn和handler.fn引用的是同一个函数,那么fn上应该也可相同的标示符, //这里就是通过这一点来判断两个变量是否引用的同一个函数 && (!fn || zid(handler.fn) === zid(fn)) && (!selector || handler.sel == selector) }) }
我们前面说了,handlers应该保存的是我们的事件句柄集合,而我们可以东莞zid获取dom的唯一标识_zid
PS:zepto将该属性保存至dom上,是因为dom属性不会变化可以帮助remove时候找到事件句柄
其中使用了filter方法过来已有的集合,只取出与传入的事件(event)对象相同的事件(命名空间那些高级东西我们暂时不管吧)
然后下面使用了proxy方法,我们来看看
//设置代理 $.proxy = function (fn, context) { if ($.isFunction(fn)) { //如果fn是函数,则申明一个新的函数并用context作为上下文调用fn var proxyFn = function () { return fn.apply(context, arguments) } //引用fn标示符 proxyFn._zid = zid(fn) return proxyFn } else if (typeof context == 'string') { return $.proxy(fn[context], fn) } else { throw new TypeError("expected function") } }
PS:我这里差点被坑了,我差点看成$.proxy方法了,其实不是的,这个handler.proxy是注册事件时候搞的一个东西,我们后面点说注册
handler.proxy = function (e) { var result = callback.apply(element, [e].concat(e.data)) //当事件处理函数返回false时,阻止默认操作和冒泡 if (result === false) e.preventDefault(), e.stopPropagation() return result }
嗯,由于这两的触发与注册事件相关,我们放到后面点再说,而且我发现triggerHandler没地方用的感觉......
$.proxy(fn, context)
接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文语境,新函数中this指向context参数。另外一种形式,原始的function是context对像的方法。//设置代理 $.proxy = function (fn, context) { if ($.isFunction(fn)) { //如果fn是函数,则申明一个新的函数并用context作为上下文调用fn var proxyFn = function () { return fn.apply(context, arguments) } //引用fn标示符 proxyFn._zid = zid(fn) return proxyFn } else if (typeof context == 'string') { return $.proxy(fn[context], fn) } else { throw new TypeError("expected function") } }
代理其实就是通过apply或者call改变javascript上下文作用域而已,我们不关注了,接下来就来到我们关键的地方了
事件注册
我们有很多方法可以为dom注册事件,而zepto为我们准备了统一的出口bind/one/delegate/live/on 都可以绑定事件,但是他们最终都是调用了add方法
其中live私下是调用delegate,而且我们推荐使用on所以我们这里主要关注on吧,反正统一接口是add
$.fn.on = function (event, selector, callback) { return !selector || $.isFunction(selector) ? this.bind(event, selector || callback) : this.delegate(selector, event, callback) } $.fn.bind = function (event, callback) { return this.each(function () { add(this, event, callback) }) }
//给元素绑定监听事件,可同时绑定多个事件类型,如['click','mouseover','mouseout'],也可以是'click mouseover mouseout' function add(element, events, fn, selector, getDelegate, capture) { var id = zid(element), set = (handlers[id] || (handlers[id] = [])) //元素上已经绑定的所有事件处理函数 eachEvent(events, fn, function (event, fn) { var handler = parse(event) //保存fn,下面为了处理mouseenter, mouseleave时,对fn进行了修改 handler.fn = fn handler.sel = selector // 模仿 mouseenter, mouseleave if (handler.e in hover) fn = function (e) { /* relatedTarget为事件相关对象,只有在mouseover和mouseout事件时才有值 mouseover时表示的是鼠标移出的那个对象,mouseout时表示的是鼠标移入的那个对象 当related不存在,表示事件不是mouseover或者mouseout,mouseover时!$.contains(this, related)当相关对象不在事件对象内 且related !== this相关对象不是事件对象时,表示鼠标已经从事件对象外部移入到了对象本身,这个时间是要执行处理函数的 当鼠标从事件对象上移入到子节点的时候related就等于this了,且!$.contains(this, related)也不成立,这个时间是不需要执行处理函数的 */ var related = e.relatedTarget if (!related || (related !== this && !$.contains(this, related))) return handler.fn.apply(this, arguments) } //事件委托 handler.del = getDelegate && getDelegate(fn, event) var callback = handler.del || fn handler.proxy = function (e) { var result = callback.apply(element, [e].concat(e.data)) //当事件处理函数返回false时,阻止默认操作和冒泡 if (result === false) e.preventDefault(), e.stopPropagation() return result } //设置处理函数的在函数集中的位置 handler.i = set.length //将函数存入函数集中 set.push(handler) element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture)) }) }
我们这里来详细看看我们的add方法
① 首先根据活动唯一的id(根据zid与dom而来)
这里有个地方要注意,因为我们对统一dom可以注册多个事件,而他们的zid是相同的哦
② 取出元素上已经绑定的事件,第一次肯定是空数组
③ 第一个参数为dom,第二个为事件名称,第三个为回调函数,后面的我们暂时不关注
④ 使用eachEvent方法,该方法会遍历事件
function eachEvent(events, fn, iterator) { if ($.type(events) != "string") $.each(events, iterator) else events.split(/\s/).forEach(function (type) { iterator(type, fn) }) }
该方法具有三个参数,第一个参数为事件名(可以传入多个事件比如:"click mousemove")
第二个参数是本身的回调函数,会在第三个参数(回调函数中作为参数传入)
PS:总之他就是个遍历处理函数,你的typeName与回调函数会传进去
⑤ 使用parse解析事件类型
//解析事件类型,返回一个包含事件名称和事件命名空间的对象 function parse(event) { var parts = ('' + event).split('.') return { e: parts[0], ns: parts.slice(1).sort().join(' ') } }
PS:为什么会有这个方法呢,因为我们使用backbone绑定事件时候是这个样子的click.delegateEvents......
完了将回调函数与选择器(如果有的话)赋予handler,这里多的我们暂时不管
⑥ i表示当前函数在dom函数集中的位置,然后将他压入set,因为set为引用,所以原来handlers[id]的值也变了
⑦ 调用addEventListener绑定事件
element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture))
至此事件绑定就结束了,我们顺便看看remove,因为所有的注销事件都是通过remove
注销事件
$.fn.off = function (event, selector, callback) { return !selector || $.isFunction(selector) ? this.unbind(event, selector || callback) : this.undelegate(selector, event, callback) } $.fn.unbind = function (event, callback) { return this.each(function () { remove(this, event, callback) }) } function remove(element, events, fn, selector, capture) { var id = zid(element) eachEvent(events || '', fn, function (event, fn) { findHandlers(element, event, fn, selector).forEach(function (handler) { delete handlers[id][handler.i] element.removeEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture)) }) }) }
我们直接对准remove开炮
① 首先根据dom获取唯一id
② 调用eachEvent方法依次处理
③ 根据findHandler找到当前type的事件类型集合
④ 删除数据句柄,然后移除dom事件
这个比较简单,我们就不详说了
简单写法
我们经常这样绑定事件:el.click(function () {})
那么这样是如何绑定事件的呢?答案在此
('focusin focusout load resize scroll unload click dblclick ' + 'mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave ' + 'change select keydown keypress keyup error').split(' ').forEach(function (event) { $.fn[event] = function (callback) { return callback ? //如果有callback回调,则认为它是绑定 this.bind(event, callback) : //如果没有callback回调,则让它主动触发 this.trigger(event) } })
以click来说相当于
$.fn.click = function (fn) { this.bind('click', callback) }
所以才绑定事件的啦......
结语
好了,今天暂时到这里,至此我们将zepto的核心就看的差不多了,剩下的我们再花一点时间说说就好了相关文章推荐
- 【zepto学习笔记03】事件机制
- C#学习笔记——事件机制
- Android 学习笔记:View的事件分发机制 解析及实例讲解
- Cocos2d-x事件分发机制学习笔记 分类: cocos2d代码编写 2015-07-27 18:02 6人阅读 评论(0) 收藏
- 学习笔记:View的事件体系4:View的事件分发机制
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
- Java 学习笔记03:Spring 3.0 核心机制 IoC
- cocos2d-x-3.1 事件分发机制 (coco2d-x 学习笔记七)
- View的事件分发机制学习笔记
- Cocos2d-x事件分发机制学习笔记
- Java学习笔记(AWT 之 事件处理机制)
- cocos2d-x-3.0学习笔记之用户事件机制
- QT学习笔记13消息机制和事件
- cocos2d-x-3.1 事件分发机制 (coco2d-x 学习笔记七)
- 韩顺平 javascript教学视频_学习笔记22_js事件驱动机制_js事件分类_js访问css技术
- 【iScroll源码学习03】iScroll事件机制与滚动条的实现
- Android触摸事件传递机制学习笔记
- View的学习笔记-View的事件分发机制
- cocos-lua学习笔记(十一)事件分发机制
- Android事件分发机制学习笔记