ractive-event

ractive event

ractive 提供 fire,on 方法 引发/注册事件
注册的 registry 在 ractive._sub

如果一个 proxy event 后面有 DOM event,则 e.original 表示 DOM event

event 插件的写法

思路,以 hover 事件为例

1
<div on-hover="do-something"></div>

直接作为 Ractive 的 template 的话,会有一个提示缺少 hover event 的插件…

我理解的思路是

  1. Ractivejs 扫描模板,找出所有 on-xxx 事件绑定.

    1. 若是原生的 DOM 事件,通过 addEventListener 绑定
    2. 寻找相关 event 插件,例如碰到 on-hover,因为 hover 不是 DOM 事件,则在 Ractive.events.hover 处寻找.
  2. 调用 Ractive.events.hover(绑定hover事件的node,用以引发hover事件的fire函数)

    1
    2
    3
    4
    5
    Ractive.events.hover = function(node, fire) {
    // hover要由 mouseover mouseleave模拟
    // 所以绑定这两个事件以调用fire引发hover
    // 最后当 这个Ractive teardown 此node的时候,取消掉 mouseover/mouseleave事件绑定
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ractive.events.hover = function(node, fire) {
var handler = function(e) {
// fire(e)
// on('event',e)
var ev = {
node: node,
original: e,
isHovering: e.type === "mouseover"
};
fire(ev); // 第二个参数没用
};

// add real dom events
node.addEventListener("mouseover", handler, false);
node.addEventListener("mouseleave", handler, false);

return {
teardown: function() {
node.removeEventListener("mouseleave", handler);
node.removeEventListener("mouseleave", handler);
}
};
};

e.original 遵循 Ractive 默认,表示背后的 DOM 事件
中间添加了一个 isHovering 表示 鼠标是进入还是出去