自定义事件模型，无需在JavaScript中使用DOM事件 [英] Custom Events Model without using DOM events in JavaScript

问题描述

我一般都不熟悉JavaScript和编程，对对象和事件有一些疑问.

I'm new to JavaScript and programming in general, and I have some questions about objects and events.

说我有一个对象:

var computer = {
    keyboard: {}
}

我正在寻找一种将事件注册到键盘对象的方法:

What I'm looking for is a way to register events to the keyboard object:

computer.keyboard.registerEvent( "keyEscape" );

触发事件:

computer.keyboard.dispatchEvent( "keyEscape" );

并创建事件处理程序:

computer.keyboard.addEventListener( "keyEscape", function() {...} );

我知道如何使用DOM元素而不是对象来做到这一点.这是可以用JavaScript(也许借助JQuery)完成的吗?

I know how to do this with DOM elements but not objects. Is this something that can be done in JavaScript (maybe with the help of JQuery)?

即使是最细微的指导，也将不胜感激.

Even the slightest bit of guidance would be appreciated greatly.

推荐答案

如果您想建立一个完全独立的事件系统而不依赖DOM事件，则可以使用反应堆模式来实现类似的事情

If you want to make a completely stand alone event system without relying on DOM events you can have something like this using reactor pattern

function Event(name){
  this.name = name;
  this.callbacks = [];
}
Event.prototype.registerCallback = function(callback){
  this.callbacks.push(callback);
}

function Reactor(){
  this.events = {};
}

Reactor.prototype.registerEvent = function(eventName){
  var event = new Event(eventName);
  this.events[eventName] = event;
};

Reactor.prototype.dispatchEvent = function(eventName, eventArgs){
  this.events[eventName].callbacks.forEach(function(callback){
    callback(eventArgs);
  });
};

Reactor.prototype.addEventListener = function(eventName, callback){
  this.events[eventName].registerCallback(callback);
};

像DOM事件模型一样使用

var reactor = new Reactor();

reactor.registerEvent('big bang');

reactor.addEventListener('big bang', function(){
  console.log('This is big bang listener yo!');
});

reactor.addEventListener('big bang', function(){
  console.log('This is another big bang listener yo!');
});

reactor.dispatchEvent('big bang');

在JSBin直播

这篇关于自定义事件模型，无需在JavaScript中使用DOM事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！