web-dev-qa-db-ja.com

JavaScriptカスタムイベントリスナー

さまざまなカスタムイベントリスナーを作成する方法を正確に理解できる人がいるかどうか疑問に思っていました。

イベントの特定のケースはありませんが、一般的にどのように行われるかを学びたいので、必要な場所に適用できます。

何人かが知っておくべきことを念頭に置いて、私がやろうとしていたことは：

var position = 0;

for(var i = 0; i < 10; i++)
{
    position++;
    if((position + 1) % 4 == 0)
    {
        // do some functions
    }
}
javascriptevent-listener
41
Lpc_dark
var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);

// custom param
evt.foo = "bar";

//register
document.addEventListener("myEvent",myEventHandler,false);

//invoke
document.dispatchEvent(evt);

リスナーとパブリッシャーを特定して、よりローカルに行う方法は次のとおりです。 http://www.kaizou.org/2010/03/generated-custom-javascript-events/

59
Max

カスタムイベントの実装は難しくありません。さまざまな方法で実装できます。最近、私はこれを次のようにしています：

/***************************************************************
*
*   Observable
*
***************************************************************/
var Observable;
(Observable = function() {
}).prototype = {
    listen: function(type, method, scope, context) {
        var listeners, handlers;
        if (!(listeners = this.listeners)) {
            listeners = this.listeners = {};
        }
        if (!(handlers = listeners[type])){
            handlers = listeners[type] = [];
        }
        scope = (scope ? scope : window);
        handlers.Push({
            method: method,
            scope: scope,
            context: (context ? context : scope)
        });
    },
    fireEvent: function(type, data, context) {
        var listeners, handlers, i, n, handler, scope;
        if (!(listeners = this.listeners)) {
            return;
        }
        if (!(handlers = listeners[type])){
            return;
        }
        for (i = 0, n = handlers.length; i < n; i++){
            handler = handlers[i];
            if (typeof(context)!=="undefined" && context !== handler.context) continue;
            if (handler.method.call(
                handler.scope, this, type, data
            )===false) {
                return false;
            }
        }
        return true;
    }
};

Observableオブジェクトは、Observableのプロトタイプをそのコンストラクターのプロトタイプと単純に混合するだけで、必要なコンストラクターによって再利用および適用できます。

リスニングを開始するには、次のように、監視可能なオブジェクトに自分自身を登録する必要があります。

var obs = new Observable();
obs.listen("myEvent", function(observable, eventType, data){
    //handle myEvent
});

または、リスナーがオブジェクトのメソッドである場合、次のようになります。

obs.listen("myEvent", listener.handler, listener);

リスナーはオブジェクトのインスタンスであり、メソッド「ハンドラー」を実装します。

Observableオブジェクトは、リスナーとの通信が必要になったときに、fireEventメソッドを呼び出すことができます。

this.fireEvent("myEvent", data);

データは、リスナーが興味深いと感じるデータです。あなたがそこに置くものは何でもあなた次第です-あなたはあなたのカスタムイベントが何で構成されているかを最もよく知っています。

FireEventメソッドは、単に「myEvent」に登録されたすべてのリスナーを通過し、登録された関数を呼び出します。関数がfalseを返す場合、イベントがキャンセルされ、observableは他のリスナーを呼び出さないことを意味するものと見なされます。その結果、fireEventメソッド全体がfasleを返すため、オブザーバブルは、リスナーに通知していたアクションをロールバックする必要があることを認識します。

おそらく、このソリューションはすべての人に適しているわけではありませんが、私はこの比較的単純なコードから多くの恩恵を受けています。

42
Roland Bouman

ここから：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

// create the event
var evt = document.createEvent('Event');
// define that the event name is `build`
evt.initEvent('build', true, true);

// elem is any element
elem.dispatchEvent(evt);


// later on.. binding to that event
// we'll bind to the document for the event delegation style. 
document.addEventListener('build', function(e){
   // e.target matches the elem from above
}, false);
9
newshorts

以下は、非常に単純な（TypeScript/Babelish）実装です。

const simpleEvent = <T extends Function>(context = null) => {
    let cbs: T[] = [];
    return {
        addListener: (cb: T) => { cbs.Push(cb); },
        removeListener: (cb: T) => { let i = cbs.indexOf(cb); cbs.splice(i, Math.max(i, 0)); },
        trigger: (<T> (((...args) => cbs.forEach(cb => cb.apply(context, args))) as any))
    };
};

次のように使用します。

let onMyEvent = simpleEvent();
let listener = (test) => { console.log("triggered", test); };
onMyEvent.addListener(listener);
onMyEvent.trigger("hello");
onMyEvent.removeListener(listener);

またはこのようなクラスで

class Example {
    public onMyEvent = simpleEvent(this);
}

単純なJavaScriptが必要な場合は、 TypeScriptプレイグラウンド を使用して変換できます。

4
Ciantic