{"id":37810,"date":"2016-02-02T20:47:42","date_gmt":"2016-02-03T02:47:42","guid":{"rendered":"http:\/\/develop.ibox.mx\/?p=162"},"modified":"2016-08-02T08:41:30","modified_gmt":"2016-08-02T13:41:30","slug":"eventos-personalizados-en-jquery","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/eventos-personalizados-en-jquery\/","title":{"rendered":"Custom events in jQuery"},"content":{"rendered":"

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:
\nAn 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.<\/p>\n

\"Lista
List of most common events<\/figcaption><\/figure>\n

Its method of use as many have known it is in jQuery as shown below:<\/p>\n

\r\n$ ('. Btn'). Click (function (event) {event.preventDefault (); alert ('Hello world.');});\r\n<\/code>\r\n<\/pre>\n
En este ejemplo estamos asignando un m\u00e9todo click a cualquier elemento que tenga la clase btn, despu\u00e9s detenemos el evento por defecto que tenga el elemento y finalmente mostramos un mensaje de con la leyenda “Hola mundo”.<\/p>\n
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.
\nBut what if I told you that there is a way to create your own event methods. We will see this below:<\/p>\n
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<\/p>\n
<script src=’https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.0\/jquery.min.js’><\/script><\/p>\n
We will also need to create a js file called global_function.js which we must link with our html as follows<\/p>\n
<script src=’js\/global_function.js’><\/script><\/p>\n
Note: It is advisable to place the js at the end of the body to speed up the loading\u00a0<\/em><\/p>\n
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<\/p>\n
\r\n$ (function () {#here we will put our code});\r\n<\/code>\r\n<\/pre>\n
Ahora deberemos continuar con lo siguiente que es crear nuestro m\u00e9todo de evento personalizado , lo haremos con la funci\u00f3n 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”<\/p>\n
 <\/p>\n
     \r\n         $ (function () {$.fn.show_alert = function () {alert ('Hello world. This is from my created event');}})\r\n     <\/code>\r\n<\/pre>\n
Now to call our custom event we will have to change our initial code a bit with the following way<\/p>\n
 <\/p>\n
\r\n$ ('. Btn'). Click (function (event) {event.preventDefault (); \/\/ alert ('Hello world.'); $ (this) .show_alert ();});\r\n<\/code>\r\n<\/pre>\n
And if we execute it, we will see the response of our new message in any button.<\/p>\n
Also, custom events can incorporate methods, for example AJAX, to make a request to another file, for example:<\/p>\n
 <\/p>\n
\r\n$ ('. 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);}} ); }\r\n<\/code>\r\n<\/pre>\n
 <\/p>\n
Advantage<\/h2>\n