jquery/javascript: $(document).trigger vs normal function call?

Question

I just saw two javascript files:

first one had called following line after some success ajax call:

$(document).trigger("locationloaded");

The second js had:

$(document).on('locationloaded', function () {
   //few lines of code here
});

Bit new to JS, just curious to know, could there be any valid reason for calling locationloaded through trigger? Why can't we have simple function as locationloaded() which would be called from first js? If both do the same work, which one should be used?

Answer 1

As per documentation of jQuery trigger

Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method.

Answer 2

Event declaration

on registers an event; in this case the locationloaded. And since the locationloaded is a custom event and the only way to fire the event is through the trigger method.

Registers an Event customevent and attach the function locationloaded

$(document).on('customevent', locationloaded);

function locationloaded() {
    console.log('The custom event is triggered inside the "locationlaoded" function');
}

Fires the Event: customevent

$(document).trigger("customevent"); 

In turn, logs the message The custom event is triggered inside the "locationlaoded" function

Using trigger vs calling the function directly; i.e. locationloaded()

Using trigger broadcast a message to the DOM that an event is fired. So any separate javascript file that listens to an event immediately notified

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

On the same file as $(document).trigger('subscribe')

$(document).on('subscribe', function() {
   // Send email
});

On the other javascript file

$(document).on('subscribe', function() {
   // Save data
});

Whereas calling a declared function directly only allows any other performing tasks within the same context of the method called.

That's why the $(document).trigger('locationloaded)` is declared in a separate file, at the same time if the event is triggered and broadcast, then, the other file can perform its tasks.

Answer 3

This is due to following a software engineering principle of having "high cohesion and low coupling" for higher quality software.

By using events you can define zero to many handlers that can do different things for different purposes. Don't need to do anything when locationloaded? Great! Have three separate things that need to be done for three different purposes defined in different places? No problem! Each event handler only has to be concerned with its own job. This is a very flexible arrangement - high cohesion.

If you just called a function, one and only one function defined in one place must exist. This function must serve every purpose no matter if those purposes are not related. The function must exist whether needed or not. Very rigid higher coupling, lower cohesion arrangement.