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 的插件…

我理解的思路是

Ractivejs 扫描模板,找出所有 on-xxx 事件绑定.
1. 若是原生的 DOM 事件,通过 addEventListener 绑定
2. 寻找相关 event 插件,例如碰到 on-hover,因为 hover 不是 DOM 事件,则在 Ractive.events.hover 处寻找.

调用 Ractive.events.hover(绑定hover事件的node,用以引发hover事件的fire函数)

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

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

Magicdawn

ractive-event

ractive event

event 插件的写法