Where Should I Bind A Global Event In Jquery

I am wondering if I want to create a custom global event listener, where I should bind that event. Which one should I use? $(window).trigger('someEvent'); or $(document).trigger('

Solution 1:

I think that you could use a Publish/Subscribe pattern which is an event-based way of thinking, but the "events" aren't tied to a specific object.

Your code will looks like this

main.js

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

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

then, in the others .js you can simply subscribe:

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

The Publish/Subscribe pattern also allows you to create modular and reusable code, and plays an important role in creating better applications, loosely coupled, flexible, scalable and easy to test.

THIS is a small working example of that code (i used jquery-tiny-pubsub plugin for publish/subscribe methods, but you can use whatever you want)

Solution 2:

All of the above work but you should always try be as specific as you can to the component you are interacting with. Custom events don't need to be binded to a high level DOM elements as you are describing.

Example:

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