1

多くのカスタム JavaScript イベントをトリガーし、それらを次のようにリッスンする予定です。

$(document).trigger('changeSettings',['param1value']);

$(document).on('changeSettings',function(e,param1){
    // do something
});

on()これらのイベントを 以外のものにバインドする必要があり$(document)ますか? $(document)多くのリスナーをorにバインドするのは悪い習慣$('body')ですか?

4

3 に答える 3

2

これは機能しますが、(読みやすさとパフォーマンスの観点から) 専用のイベント ライブラリを使用することをお勧めします。それをしたくない場合は、これがより適切な方法です。

jQuery では、オブジェクトとしてメモリ内に存在するdocumentFragmentsを作成できます。これはページに追加されず、返された値 (ここでは に格納されていますwindow.events) を使用してのみイベントをトリガーできます。

window.events = $('<div>');

events.on('changeSettings',function(e,param1){
    // do something
});

events.trigger('changeSettings', ['value']);

フィドル

イベントのみを行うradio.jsを使用した例を次に示します。

radio('changeSettings').subscribe(function(data1, data2) {
    //do something with data1 and data2
});
radio('changeSettings').broadcast(data1, data2);

このようなことを行うこともできます。これにより、リファクタリングと縮小が可能になります。

var events = {changeSettings: radio('changeSettings')};

events.changeSettings.subscribe(function(data1, data2) {
    //do something with data1 and data2
});
events.changeSettings.broadcast(data1, data2);
于 2013-08-17T06:07:25.603 に答える
1

イベントが DOM に関連していない場合、DOM 要素でイベントを発生させるのはおそらく適切ではありません。代わりにできること (jQuery を使用していることに気付きました) は、新しい jQuery オブジェクトをイベント バスとして使用することです。

例えば：

var eventBus = $({});

//listen for the event
eventBus.on('changeSettings', function (e) {
    console.log('changeSettings triggered ', e.settings); 
});

//fire the event
var evt = $.Event('changeSettings');
evt.settings = { someSetting: 1 };

eventBus.trigger(evt);

ただし、イベント バスを介してすべてのイベントをブロードキャストするのではなく、アプリの複数の部分でグローバルに関心のあるイベントのみをブロードキャストする必要があります。たとえば、'userInfosChanged' のようなイベントは、アプリケーションのモジュールの多くが反応する可能性があるため、ブロードキャストすると興味深い場合があります。一方、ブロードキャストする必要のない一部のオブジェクト インスタンスによって起動される他のイベントが存在する可能性があるため、その場合は、オブジェクト インスタンス自体にイベント ハンドラーを登録します。

DOM イベントに戻ると。イベントを発生させる子要素を含む や別の要素のように、コンテナ要素でリスナーを使用する主な理由の 1 つは、documentすべての子要素にイベント ハンドラーをアタッチする必要を回避することです。これは、メモリの点でより効率的です。また、コンテナに子を動的に追加または削除できる場合、これは非常に便利なアプローチです。

編集: イベント専用の小さなライブラリを探している場合は、http://microjs.com/#eventを参照してください。

于 2013-08-17T06:22:34.557 に答える