jquery绑定设计

导语 jquery绑定设计提到jQuery的事件,不得不提一下 Dean Edwards大神 addEvent 库,很多流行的类库的基本思想从他那儿借来的。jQuery的事件处理机制吸取了 JavaScript 专家 Dean Edwards 编写的事件处理函

jquery绑定设计

提到jQuery的事件,不得不提一下 Dean Edwards大神 addEvent 库,很多流行的类库的基本思想从他那儿借来的。jQuery的事件处理机制吸取了 JavaScript 专家 Dean Edwards 编写的事件处理函数的精华,使得jQuery处理事件绑定的时候相当的可靠。在预留退路(graceful degradation),循序渐进以及非入侵式编程思想方面,jQuery 也做的非常不错。总的来说对于 jQuery 的事件绑定做了 2 大块的处理:

在绑定的时候做了包装处理 在执行的时候有过滤器处理

看看 API 的参数:

.on( events [, selector ] [, data ], handler(eventObject) )
  1. events:事件名
  2. selector : 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素
  3. data :当一个事件被触发时,要传递给事件处理函数的
  4. handler : 事件被触发时,执行的函数

用来绑定一个事件:

var body = $('body')
body.on('click','p',function(){
    console.log(this)
})

用 on 方法给 body 上绑定一个 click 事件,冒泡到 p 元素的时候才出发回调函数,这里大家需要明确一点:

每次在body上点击其实都会触发事件,但是只目标为p元素的情况下才会触发回调的处理函数。通过源码不难发现on方法实质只完成一些参数调整的工作,而实际负责事件绑定的是其内部 jQuery.event.add方法

看看绑定的实际接口on的代码:

on: function(types, selector, data, fn, /*INTERNAL*/ one) {
  //省略部分代码
  return this.each(function() {
    jQuery.event.add(this, types, fn, data, selector);
  });
}

 jQuery.event.add内部实际上最终还是通过addEventListener绑定的事件

\

(单击图片可放大)

其中一些变量代码的意思:

  1. elem: 目标元素
  2. type: 事件类型,如’click’
  3. eventHandle: 事件句柄,也就是事件回调处理的内容了
  4. false: 冒泡
  5. elem: 目标元素type: 事件类型,如’click’eventHandle: 事件句柄,也就是事件回调处理的内容了false: 冒泡

现在我们把之前的案例给套一下看看:

var body = document.getElementsByTagName('body')
var eventHandle = function() {
    console.log(this)
}
body.addEventListener('click', eventHandle, false);

如果是我们自己实现的这个代码是有问题的,我们在body上每次都触发了click事件,但是我们并没有委托的p元素的处理,自然也达不到委托的效果。

eventHandle源码

回到内部绑定的事件句柄 eventHandle ,可想而知 eventHandle 不仅仅只是只是充当一个回调函数的角色,而是一个实现了 EventListener 接口的对象。

if (!(eventHandle = elemData.handle)) {
    eventHandle = elemData.handle = function(e) {
        return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
            jQuery.event.dispatch.apply(elem, arguments) : undefined;
    };
}

可见在 eventHandle 中并没有直接处理回调函数,而是映射到 jQuery.event.dispatch 分派事件处理函数了仅仅只是传入 eventHandle.elem,arguments , 就是 body 元素 与事件对象那么这里有个问题,事件回调的句柄并没有传递过去,后面的代码如何关联?本章的一些地方可能要结合后面的 dispatch 处理才能清理,但是我们还是先看看做了那些处理。

一个简单的流程图:

\


http://www.aseoe.com/ true jquery绑定设计 http://www.aseoe.com/show-13-609-1.html report 1752 jquery绑定设计提到jQuery的事件,不得不提一下 Dean Edwards大神 addEvent 库,很多流行的类库的基本思想从他那儿借来的。jQuery的事件处理机制吸取了 JavaScript 专家 Dean Edwards 编写的事件处理函
TAG:jquery
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-13-609-1.html
[ 扫一扫,在手机上阅读 ]

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)