如何使用Java脚本实现完整的事件系统? [英] How to implement a complete event system with Javascript?

问题描述

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

I'm creating a client-side dynamic blog engine. Now I need a event system to handle many actions from DOM elements and the engine. Such as the engine is loading a article,user is switching a theme...

而且我不想使用库来做到这一点.

And I don't want to use a library to do this.

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

So far I've done is using a list to store callbacks for a event.

但是我希望每个回调都可以用于不同的对象.就像DOM事件一样.

But I want each callback works with different objects.Like the DOM event.

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

I may add an id-like property to each object, and store (id,callbacks) in a event.I feel it's not so good.When comes with dynamically generated object,it could be complex to deal with.

如何实现与DOM事件一样简单(使用)?

How to implement it as simple as DOM event (to use)?

推荐答案

最近，我想向简单的JavaScript对象添加简单的事件侦听器.这是我想出的解决方案

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

(这需要ecmascript > = 5 )

(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"));

祝你好运！

这篇关于如何使用Java脚本实现完整的事件系统?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！