CODEWITHSUNDEEP
javascriptjqueryhtml
colonel_claypoo
colonel_claypoo

Reputation: 615

Understanding on() syntax with a non-standard event name

I've come across jQuery code that looks like this:

$('.newsZoneWP').on('loadingComplete', function () {
  // ...
});

What exactly does the loadingComplete mean? In the jQuery documentation I read that the on() method attaches an event handler function for one or more events to the selected elements. However, the loadingComplete does not occur to me as an event such as click.

Also, I cannot find anything in the DOM for loadingComplete so how can I interpret this syntax?

Thanks!

Upvotes: 2

Views: 185

Answers (5)

djolf
djolf

Reputation: 1196

You are right about the on(event, callback) function, it basically listens to an event, and executes the callback function. Regarding the 'loadingComplete' event, it's probably a custom event that is used by a third party library, or in your own project by some other developer.

You can trigger a custom event in jQuery easily and listen to it:

// this statement listens to the customEvent
$(selector).on('customEvent', function(e) {
  console.log('event fired');
}

// this statement triggers the customEvent
$(selector).trigger('customEvent');

Upvotes: 1

Manish Khedekar
Manish Khedekar

Reputation: 402

In the browser, we have predefined events such as onClick,onChange, etc. Above is just syntax to add your own event using on() which does the same as addEventListener, where the first parameter is the name of your event and the second one is callback which is to be called when an event occurs.

Please refer, http://javascript.info/events

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44107

Yes, it's a normal event listener with jQuery's .on syntax. However, since it's not part of the JavaScript event list, it must be part of a third-party library you're using somewhere. You can also create custom events - you don't just have to use the ones provided by the browser.

$(".newsZoneWP").on('loadingComplete', function(e) {
  console.log("Custom event fired!");
});
$(".newsZoneWP").trigger("loadingComplete");
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="newsZoneWP"></div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

loadingcomplete is the name of the event to be caught and handled by this logic.

Note that you can trigger an event of any customised name you require, as well as all the standard click, focus etc. I would assume in this case that the loadingcomplete event is part of a third party library which does something like this:

var $news = $('.newsZoneWP').on('loadingComplete', function() {
  console.log('News zone loaded...');
});

// somewhere in a third party library:
$('.newsZoneWP').trigger('loadingComplete');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsZoneWP"></div>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074355

You're interpreting it correctly. loadingComplete is probably an event provided by a plugin. You can trigger any event type you want on an element, you're not limited to the ones the DOM defines.

Example:

$('.newsZoneWP').on('loadingComplete', function (e) {
    console.log("Event type: " + e.type);
});

// Triggering it (from the plugin, etc.):
$('.newsZoneWP').trigger("loadingComplete");
<div class="newsZoneWP"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 2

Related Questions