2016-06-16 7 views
0

カスタムグローバルイベントリスナーを作成したい場合は、そのイベントをバインドする必要があります。どちらを使うべきですか?例えばjQueryでグローバルイベントをバインドする必要があります

$(window).trigger('someEvent'); 

または

$(document).trigger('someEvent'); 

または

$('body').trigger('someEvent'); 

、それは家庭約-たち、ニュースや他のいくつかのページがありますするサイトがあります。各ページには独自のjavascriptファイル(home.js、about-us.jsなど)があります。共通のjavascriptファイルmain.jsがあり、サイト全体の中核または共通の機能をすべて提供します。

今、私はすべての$(ドキュメント).ready()と、この

$(document).ready(function(){ 
$(document).trigger('documentReady'); 
}); 

ようmain.jsにカスタムイベントをトリガすることにより、$(ウィンドウ).resize()関数を集中管理します
$(window).resize(function(){ 
$(window).trigger('windowReszie'); 
}); 

すべてのjavascriptファイルで、すべてのファイルでready()またはresize()関数を繰り返すのではなく、対応するイベントのeventListenerが必要です。

しかし、すべてのカスタムイベントを同じオブジェクトにバインドするのがよいかどうかはわかりません。はいの場合は、どのオブジェクトをバインドすればいいですか?資料?体?

+0

の小さな作業例ですか? – Jamiec

+0

そのすべてが動作します。しかし、彼らの間に違いがあるのだろうかと私は思っています –

+0

あなたが達成しようとしていることがわかりません... – Rayon

答えて

0

上記の作業はすべて、作業するコンポーネントのできるだけ具体的に行うようにしてください。カスタムイベントは、説明しているように上位レベルのDOM要素にバインドする必要はありません。

例:

$('.slider').trigger('someEvent'); 
1

私はあなたが思考のイベントベースの方法ですが、「イベントは」に縛られていないパブリッシュ/サブスクライブパターンを使用することができることを考えます特定のオブジェクト。パターンを購読/

$.subscribe('documentReady', function(){ alert('documentReady'); }); 
$.subscribe('resize', function(){ alert('resize'); }); 

公開:

はあなたのコードの意志が他の人はあなたが簡単に購読することができ.jsファイルで、

$(document).ready(function(){ 
    $.publish('documentReady'); 
}); 

$(window).resize(function(){ 
    $.publish('resize'); 
}); 

この

main.jsのように見えますまた、モジュール化された再利用可能なコードを作成することができ、より堅牢なアプリケーション、疎結合、柔軟なスケーラブルを作成する上で重要な役割を果たします簡単にテストすることができます。

THISは1つが動作するコード(私はjquery-tiny-pubsub pluginを使用する方法をパブリッシュ/サブスクライブ、しかし、あなたが欲しいものは何でも使用することができます)

関連する問題