Custom events in jQuery Custom events in jQuery

All of us who have handled javascript or jquery know what events are, but if you are a newbie here we will put you what an event is:
An event in the world of programming is known to any action that the user performs with the system or in our case on the website, such as the most common ones that are presented below according to their respective language.

Its method of use as many have known it is in jQuery as shown below:

$ ('. Btn'). Click (function (event) {event.preventDefault (); alert ('Hello world.');});

In this example we are assigning a click method to any element that has the btn class, then we stop the default event that the element has and finally we show a message with the legend "Hello world".

This was a bit of basic theory of event handling in jQuery, but if it happened that we wanted the same action in another module, we would have to copy and paste in a different selector.
But what if I told you that there is a way to create your own event methods. We will see this below:

First create an html called index.html and do not forget to incorporate the jQuery library then we place the code to add the js

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js’></script>

We will also need to create a js file called global_function.js which we must link with our html as follows

<script src=’js/global_function.js’></script>

Note: It is advisable to place the js at the end of the body to speed up the loading 

Now to continue we must place a method either ready or $ (function ()) to start with the script, I will use the following to start as a plugin

$ (function () {#here we will put our code});

Now we must continue with the following, which is to create our custom event method, we will do it with the jquery function "$.fn" which is a javascript property to create functions that will affect one or more selectors. My selector will be called "show_alerta"

         $ (function () {$.fn.show_alert = function () {alert ('Hello world. This is from my created event');}})
     

Now to call our custom event we will have to change our initial code a bit with the following way

$ ('. Btn'). Click (function (event) {event.preventDefault (); // alert ('Hello world.'); $ (this) .show_alert ();});

And if we execute it, we will see the response of our new message in any button.

Also, custom events can incorporate methods, for example AJAX, to make a request to another file, for example:

$ ('. Btn'). Click (function (event) {event.preventDefault (); // alert ('Hello world.'); Var url = 'ajax / clients / create'; var form = $ ('#my -form & '). serialize (); var result = $ ('. message & '); $ (this) .request (url, form, result);}); $.fn.request = function (url, form, result) {$.ajax ({type: 'POST', url: url, data: form, success: function (respond) {result.html (respond);}} ); }

Advantage

• Reduction of repeated methods
• More ordered code
• Recycle code in different projects

References of interest

Chapter 11

Basic plugin creation

Custom events in jquery