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 表示 鼠标是进入还是出去