如何使用javascript实现完整的事件系统？

由陌上桑发布于 2020-05-18 03:29:17

我正在创建一个客户端动态博客引擎。现在，我需要一个事件系统来处理DOM元素和引擎中的许多操作。例如引擎正在加载文章，用户正在切换主题...

而且我不想使用库来执行此操作。

到目前为止，我已经完成了使用列表存储事件回调的操作。

但是我希望每个回调都可以与不同的对象一起使用，就像DOM事件一样。

我可能会向每个对象添加一个类似于id的属性，并在事件中存储（id，回调）。我感觉不太好。当带有动态生成的对象时，处理起来可能很复杂。

如何实现与DOM事件一样简单（使用）？

wiusto

2020-05-18 03:29:17

您可以实现中介模式：

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript

这本书是您需要了解的所有内容。

莫i相忘

2020-05-18 03:29:17

Recently, I wanted to add simple event listeners to vanilla JavaScript objects. This is the solution I came up with

(This requires ecmascript >= 5)

function Emitter () {
  var eventTarget = document.createDocumentFragment();

  function delegate (method) {
    this[method] = eventTarget[method].bind(eventTarget);
  }

  Emitter.methods.forEach(delegate, this);
}

Emitter.methods = ["addEventListener", "dispatchEvent", "removeEventListener"];

现在是一个使用它的“类”

function Example () {
  Emitter.call(this);
}

让我们现在尝试一下！

var e = new Example();

e.addEventListener("something", function(event) {
  alert("something happened! check the console too!");
  console.log(event);
});

e.dispatchEvent(new Event("something"));

祝好运！

陌上桑

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3306
注册排名
1945