私は JavaScript とプログラミング全般に不慣れで、オブジェクトとイベントについていくつか質問があります。
オブジェクトがあるとします:
var computer = {
keyboard: {}
}
私が探しているのは、キーボード オブジェクトにイベントを登録する方法です。
computer.keyboard.registerEvent( "keyEscape" );
イベントを発生させます:
computer.keyboard.dispatchEvent( "keyEscape" );
そして、イベント ハンドラーを作成します。
computer.keyboard.addEventListener( "keyEscape", function() {...} );
オブジェクトではなくDOM要素でこれを行う方法を知っています。これは JavaScript で (おそらく JQuery の助けを借りて) 実行できるものですか?
ほんの少しのガイダンスでも大歓迎です。
DOMイベントに依存せずに完全にスタンドアロンのイベントシステムを作成したい場合は、reactorパターンを使用してこのようなものを作成できます
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');
独自のイベント処理メカニズムを実装したくない場合は、私のアプローチが気に入るかもしれません。通常の 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 スニペットもあります。
EventTarget次のように、DOM オブジェクトを作成しなくても、一部の人が提案したように新しいインスタンスを簡単に作成できます。
const target = new EventTarget();
target.addEventListener('customEvent', console.log);
target.dispatchEvent(new Event('customEvent'));
これにより、DOM イベントで使い慣れたすべての機能が提供され、空のドキュメント要素やノードを作成する必要がなくなります。
詳細については、Mozilla 開発者ガイドを参照してください: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
ここに少し投稿しますが、私は昨夜、次のようなものを書きました - 非常にシンプルで、Backbone.js Events モジュールに基づいています:
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);
}
いくつかの単純な名前空間を使用すると、モジュール間で基本的なイベントを簡単に渡すことができます!
JQueryを使用してそれを行うことができます。
カスタム イベントをサブスクライブするには:
$(computer.keyboard).on('keyEscape', function(e){
//Handler code
});
カスタム イベントをスローする場合:
$(computer.keyboard).trigger('keyEscape', {keyCode:'Blah blah'});
これは最善の方法ではないかもしれませんが、JQuery ロジックをラップする関数 (addEventListener、dispatchEvent など) をメソッド内に作成して、ネイティブに見える API と JQuery の両方をサポートすることもできます。
ほとんどの場合、複数のオブジェクト間の通信手段としてイベント メカニズムが必要です。
これを達成する方法は次のとおりです。
/**
* EventfulObject constructor/base.
* @type EventfulObject_L7.EventfulObjectConstructor|Function
*/
var EventfulObject = function() {
/**
* Map from event name to a list of subscribers.
* @type Object
*/
var event = {};
/**
* List of all instances of the EventfulObject type.
* @type Array
*/
var instances = [];
/**
* @returns {EventfulObject_L1.EventfulObjectConstructor} An `EventfulObject`.
*/
var EventfulObjectConstructor = function() {
instances.push(this);
};
EventfulObjectConstructor.prototype = {
/**
* Broadcasts an event of the given name.
* All instances that wish to receive a broadcast must implement the `receiveBroadcast` method, the event that is being broadcast will be passed to the implementation.
* @param {String} name Event name.
* @returns {undefined}
*/
broadcast: function(name) {
instances.forEach(function(instance) {
(instance.hasOwnProperty("receiveBroadcast") && typeof instance["receiveBroadcast"] === "function") &&
instance["receiveBroadcast"](name);
});
},
/**
* Emits an event of the given name only to instances that are subscribed to it.
* @param {String} name Event name.
* @returns {undefined}
*/
emit: function(name) {
event.hasOwnProperty(name) && event[name].forEach(function(subscription) {
subscription.process.call(subscription.context);
});
},
/**
* Registers the given action as a listener to the named event.
* This method will first create an event identified by the given name if one does not exist already.
* @param {String} name Event name.
* @param {Function} action Listener.
* @returns {Function} A deregistration function for this listener.
*/
on: function(name, action) {
event.hasOwnProperty(name) || (event[name] = []);
event[name].push({
context: this,
process: action
});
var subscriptionIndex = event[name].length - 1;
return function() {
event[name].splice(subscriptionIndex, 1);
};
}
};
return EventfulObjectConstructor;
}();
var Model = function(id) {
EventfulObject.call(this);
this.id = id;
this.receiveBroadcast = function(name) {
console.log("I smell another " + name + "; and I'm model " + this.id);
};
};
Model.prototype = Object.create(EventfulObject.prototype);
Model.prototype.constructor = Model;
// ---------- TEST AND USAGE (hopefully it's clear enough...)
// ---------- note: I'm not testing event deregistration.
var ob1 = new EventfulObject();
ob1.on("crap", function() {
console.log("Speaking about craps on a broadcast? - Count me out!");
});
var model1 = new Model(1);
var model2 = new Model(2);
model2.on("bust", function() {
console.log("I'm model2 and I'm busting!");
});
var ob2 = new EventfulObject();
ob2.on("bust", function() {
console.log("I'm ob2 - busted!!!");
});
ob2.receiveBroadcast = function() {
console.log("If it zips, I'll catch it. - That's me ob2.");
};
console.log("start:BROADCAST\n---------------");
model1.broadcast("crap");
console.log("end :BROADCAST\n---------------\n-\n-\n");
console.log("start:EMIT\n---------------");
ob1.emit("bust");
console.log("end:EMIT\n---------------");<h1>...THE SHOW IS ON YOUR CONSOLE!</h1>