所谓的事件机制,就是用来落实和事件有关的机能的函数,一般大家操作事件需3个功效:
绑定
撤消绑定
执行

比如
elem.on(‘click’, fn);

所有js框架都提供事件函数,因为:
浏览器自带的风波不匹配。

现阶段常用的轩然大波实现有:
[Ext] elem.on elem.un elem.fireEvent (addEventListener 等简写)
[jQuery] elem.bind elem.unbind elem.trigger
[mootools] elem.addEvent elem.removeEvent elem.fireEvent

自己利用的是:
elem.on  elem.un  elem.trigger – 因为最短

(PS,使用 triggerListener 是不当的, 应该 dispatchListener)

jQuery中,将事件名作为函数方便使用。

事件之中怎么着实现?
也就是说当我们执行 on(‘click’, fn); 做哪些事?

最简单易行也是不行使用的艺术是mootools的做法:
对不同的浏览器, IE 使用 attch伊夫nt , 另外使用 add伊芙(Eve)ntListenr

如此感觉是没错,但有2个问题:
jQuery,当事件有几百个后,效能很低。(不常见)
当 on(‘click’, fA) , on(‘click’, fB)
那时候假设click, IE先运行 fB 然后 fA  另外则正常地运作 fA和fB
。(容易造成问题)

要说好的轩然大波机制,当是jQuery的兑现。(但效率稍低)
首先,jQuery内部有世界缓存数组。这一个数组可用 $().data(‘event’)
重临。那个数据结构为:
event = {
 click: [fA, fB]
 dblclick: [fC]
};

当浏览器触发 click 后,遍历 event[‘click’] 全部函数和实施。

自己最后拔取以下格局贯彻。

主干和jQuery的一致, 但event数据结构为:

event = {
  click: fn_click,  // 系统click 后执行 fn_click , fn_click
执行里面的持有函数。
 …
}

fn_click = {
   handlers: [fA, fB]
   target: elem
}

然后是 事件目标的包裹。
所谓的风波目标,就是绑定函数的参数 e 。
(熟练 .net 的校友肯能更欣赏叫它 伊芙ntArgs  )

因为不同浏览器这一个目的不同,所以封装是一定的。
时下漫天框架都使用自定义事件目的的点子,把原事件的各值拷到自定义的靶子。
但如此有通病,就是很多值也许用不到,无故统计浪费功能,(事件是常执行的,这效用不可忽略)

Ext则利用函数情势,减小没用的正片。如得到屏幕坐标,使用
e.getX()  这有点不赏心悦目。但将就了。

自我透过再三的设想,决定不自定义事件目的。直接用自带的,
诸如此类有个毛病: 火狐下无法设置系统 getter 属性。
也就是说:
e.target = e.target.nodeType == 3 ? e.target.parentNode : e.target;  //
标准浏览器肯能 target 是文本节点。 IE的 target则是 元素。
在火狐是错的。 因为 target是只读的。

接下去是仿照事件触发,

在 jQuery 中,很麻烦的用代码模拟了补助冒泡的事件。 即使在IE有一揽子的
fire伊夫nt ,标准浏览器也有 dispatchListener 函数。

不过如若协调模仿,能够制止浏览器不同,实现统一。

相关文章

网站地图xml地图