dojo事件驱动编程之事件绑定

　　什么是事件驱动？

　　事件驱动编程是以事件为第一驱动的编程模型，模块被动等待通知（notification），行为取决于外来的突发事件，是事件驱动的，符合事件驱动式编程（Event-Driven　Programming，简称EDP）的模式。

　　何谓事件？通俗地说，它是已经发生的某种令人关注的事情。在软件中，它一般表现为一个程序的某些信息状态上的变化。基于事件驱动的系统一般提供两类的内建事件（built-in event）：一类是底层事件（low-level event）或称原生事件（native event），在用户图形界面（GUI）系统中这类事件直接由鼠标、键盘等硬件设备触发；一类是语义事件（semantic event），一般代表用户的行为逻辑，是若干底层事件的组合。比如鼠标拖放（drag-and-drop）多表示移动被拖放的对象，由鼠标按下、鼠标移动和鼠标释放三个底层事件组成。

　　还有一类用户自定义事件（user-defined event）。它们可以是在原有的内建事件的基础上进行的包装，也可以是纯粹的虚拟事件（virtual event）。除此之外，编程者不但能定义事件，还能产生事件。虽然大部分事件是由外界激发的自然事件（natural event），但有时程序员需要主动激发一些事件，比如模拟用户鼠标点击或键盘输入等，这类事件被称为合成事件（synthetic event）。这些都进一步丰富完善了事件体系和事件机制，使得事件驱动式编程更具渗透性。

　　

on.matches = function(node, selector, context, children, matchesTarget) {
// summary:
//        Check if a node match the current selector within the constraint of a context
// node: DOMNode
//        The node that originate the event
// selector: String
//        The selector to check against
// context: DOMNode
//        The context to search in.
// children: Boolean
//        Indicates if children elements of the selector should be allowed. This defaults to
//        true
// matchesTarget: Object|dojo/query?
//        An object with a property "matches" as a function. Default is dojo/query.
//        Matching DOMNodes will be done against this function
//        The function must return a Boolean.
//        It will have 3 arguments: "node", "selector" and "context"
//        True is expected if "node" is matching the current "selector" in the passed "context"
// returns: DOMNode?
//        The matching node, if any. Else you get false

// see if we have a valid matchesTarget or default to dojo/query
matchesTarget = matchesTarget && matchesTarget.matches ? matchesTarget : dojo.query;
children = children !== false;
// there is a selector, so make sure it matches
if(node.nodeType != 1){
// text node will fail in native match selector
node = node.parentNode;
}
while(!matchesTarget.matches(node, selector, context)){
if(node == context || children === false || !(node = node.parentNode) || node.nodeType != 1){ // intentional assignment
return false;
}
}
return node;
}

View Code

　　对比dojo与jquery的事件处理过程，可以发现jQuery在事件存储上更上一筹：

　　dojo直接绑定到dom元素上，jQuery并没有将事件处理函数直接绑定到DOM元素上，而是通过.data存储在缓存.cahce上。

　　声明绑定的时候：

首先为DOM元素分配一个唯一ID，绑定的事件存储在
.cahce[唯一ID][.expand ][ 'events' ]上，而events是个键-值映射对象，键就是事件类型，对应的值就是由事件处理函数组成的数组，最后在DOM元素上绑定（addEventListener/attachEvent）一个事件处理函数eventHandle，这个过程由 jQuery.event.add 实现。

　　执行绑定的时候：

当事件触发时eventHandle被执行，eventHandle再去$.cache中寻找曾经绑定的事件处理函数并执行，这个过程由 jQuery.event. trigger 和 jQuery.event.handle实现。

事件的销毁则由jQuery.event.remove 实现，remove对缓存$.cahce中存储的事件数组进行销毁，当缓存中的事件全部销毁时，调用removeEventListener/ detachEvent销毁绑定在DOM元素上的事件处理函数eventHandle。

　　

　　以上就是dojo事件模块的主要内容，如果结合Javascript事件机制兼容性解决方案来看的话，更有助于理解dojo/on模块。

　　如果您觉得这篇文章对您有帮助，请不吝点击一下右下方的推荐，谢谢！

　　参考文章：

　　冒号课堂§3.4：事件驱动

　　jQuery 2.0.3 源码分析 事件体系结构