javascript - 在JavaScript中,不使用DOM事件的自定義事件模型

  显示原文与译文双语对照的内容
117 0

對於JavaScript和編程,我是新手,我對對象和事件有一些問題。

假設我有一個對象:

var computer = {
 keyboard: {}
}

我正在尋找的是一種將事件發送到鍵盤對象的方法:

computer.keyboard.registerEvent("keyEscape" );

觸發事件:

computer.keyboard.dispatchEvent("keyEscape" );

並創建事件處理程序:

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

我知道如何使用DOM元素,但不使用對象。這是可以在 JavaScript ( 也許借助JQuery的幫助) 中完成的?

哪怕是一點點的指導也會非常感激。

时间:原作者:0个回答

121 2

如果你想在不依賴DOM事件的情況下製作一個完全獨立的事件系統,那麼你可以使用

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);
};

使用it事件模型

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

原作者:
76 0

如果你不希望實現自己的事件處理機制,你可能會喜歡我的方法。你將獲得從常規的DOM事件( 內向( preventDefault ) ) 獲得的所有功能,我認為它更輕量級,因為它使用了瀏覽器的DOM事件處理功能。

創建一個普通的DOM EventTarget對象,並將所有EventTarget介面調用傳遞到 DOM EventTarget對象,

var MyEventTarget = function(options) {
//Create a DOM EventTarget object
 var target = document.createTextNode(null);
//Pass EventTarget interface calls to DOM EventTarget object
 this.addEventListener = target.addEventListener.bind(target);
 this.removeEventListener = target.removeEventListener.bind(target);
 this.dispatchEvent = target.dispatchEvent.bind(target);
//Room your your constructor code 
}
//Create an instance of your event target
myTarget = new MyEventTarget();
//Add an event listener to your event target
myTarget.addEventListener("myevent", function(){alert("hello")});
//Dispatch an event from your event target
var evt = new Event('myevent');
myTarget.dispatchEvent(evt);

還有一個 JSFiddle Fragment插件,用於通過瀏覽器測試它。

原作者:
108 1

我只是寫了一點,昨晚我寫了類似的東西- 超級簡單,基於事件模塊:

EventDispatcher = {
 events: {},
 on: function(event, callback) {
 var handlers = this.events[event] || [];
 handlers.push(callback);
 this.events[event] = handlers;
 },
 trigger: function(event, data) {
 var handlers = this.events[event];
 if (!handlers || handlers.length <1)
 return;
 [].forEach.call(handlers, function(handler){
 handler(data);
 });
 }
};

這種方法非常簡單且可以擴展,允許你在需要時構建一個更加複雜的事件系統,如果你需要。

使用 EventDispatcher的操作非常簡單:

function initializeListeners() {
 EventDispatcher.on('fire', fire);//fire.bind(this) -- if necessary
}
function fire(x) {
 console.log(x);
}
function thingHappened(thing) {
 EventDispatcher.trigger('fire', thing);
}

通過一些簡單的命名空間,你將能夠輕鬆地通過模塊之間的基本事件 !

原作者:
...