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.

Lista de eventos
List of most common events

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


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

En este ejemplo estamos asignando un método click a cualquier elemento que tenga la clase btn, después detenemos el evento por defecto que tenga el elemento y finalmente mostramos un mensaje de con la leyenda «Hola mundo».

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});

Ahora deberemos continuar con lo siguiente que es crear nuestro método de evento personalizado , lo haremos con la función de jquery «$.fn» que es una propiedad de javascript para crear funciones que afectaran a uno o mas selectores. Mi selector se llamara «mostrar_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

Previous Programming standards
Next Goodbye Wi-Fi, Li-Fi technology arrives and a Mexican brings it

No Comment

Leave a reply

Your email address will not be published. Required fields are marked *