掌握 Dojo 工具包，第 3 部分: Dojo 事件机制

核心提示： 清单 5 的页面中有一个跟 c++ 相关的书的列表，列表的每一项都通过 dojo.connect 绑定了一个或多个事件处理函数，掌握 Dojo 工具包，第 3 部分: Dojo 事件机制(8)，第一项“ c++ primer ”给 mouseover，mousedown，

清单 5 的页面中有一个跟 c++ 相关的书的列表，列表的每一项都通过 dojo.connect 绑定了一个或多个事件处理函数。第一项“ c++ primer ”给 mouseover，mousedown，click 三个事件注册了事件处理函数，第二项“ Thinking in c++ ”注册了两个 click 事件处理函数 handler 和 handler2，第三项“ Inside C++ object model ”绑定了 click 事件。这个例子可以说包括了“简单连接”机制的方方面面。

首先来看看 dojo.connect 的使用，dojo.connect 能够把多个事件处理函数绑定在一个事件上，第二项“ Thinking in c++ ”的 click 事件就绑定了两个事件处理函数。在本例中，并没有给 dojo.connect 函数传递事件处理函数的 context，因为默认的是 dojo.global，而两个事件处理函数 hander 和 hander2 都是全局函数，所以不需要显示传递 dojo.global 。

再来看事件处理函数 handler 和 handler2 。 handler2 只是用来说明 dojo.connect 可以绑定多个事件处理函数，不多说； handler 是主要的事件处理函数，在 handler 里先输出了事件对象的三个属性，type、target、currentTarget，type 表示事件的类型，target 表示事件目标节点，currentTarget 表示当前事件传递到哪个节点了，输出他们三个是为了说明 Dojo 也是在冒泡阶段处理事件的（还记得在 DOM 事件模型部分对事件的三个阶段的描述吗？）。所以当点击第三项 b3 时，在浏览器的模拟控制台输出是

　eventType=click;　node=b3;　currentTarget=b3　
　eventType=click;　node=b3;　currentTarget=cpp　
　eventType=click;　node=b3;　currentTarget=book

可以看出，首先会触发 b3 的事件处理函数，然后是 id 为 cpp 的 ol 元素的 click 事件处理函数，最后是 id 为 book 的 div 。所以毫无疑问 Dojo 是在事件的冒泡阶段处理事件的，capture 阶段并不做任何处理。 handler 的最后是关于阻止事件传播的代码，如果按住 shift 键，再点击第三项时，只会在模拟控制台输出：