Introducción a jQuery Events
JQuery es una de las bibliotecas javascript más populares y ampliamente utilizadas, desarrollada y diseñada para simplificar la arquitectura DOM basada en HTML, es decir, las propiedades del modelo de objetos del documento, como la lectura, la manipulación y el recorrido del árbol. Las otras propiedades de jQueries, como el manejo de eventos, Ajax, el estilo y la animación CSS también se simplifican. Es una biblioteca de código abierto y libre que se usa típicamente en el 73% de las aprox. 10 millones de sitios web que se utilizan hoy en día. Las características principales de Jquery incluyen propiedades basadas en elementos DOM, como selectores, manipulación y recorrido del árbol, lo que hace que trabajar en JQuery sea mucho más interesante, fácil y conveniente.
Se utiliza para proporcionar una interfaz muy simple y simple que se puede utilizar para aplicar varios tipos de efectos sorprendentes. Estos métodos también permiten el uso y la aplicación rápidos de las funciones más utilizadas y sus efectos, junto con configuraciones mínimas. Los comandos básicos, como los de mostrar y ocultar elementos, son más o menos los mismos y los demás también se encuentran en la misma categoría con lo que cualquiera que esté dispuesto a verlos esperaría. El comando show (), en este caso, se usa para mostrar los elementos de forma totalmente envolvente y el comando set and hide () combinado para ocultar esas características.
Jquery está hecho a medida y se utiliza para responder a los eventos proporcionados en una página HTML. Los eventos en sí mismos son las diferentes acciones de los visitantes a las que puede responder la página web. En otras palabras, un evento se utiliza para representar ligeramente el momento preciso o exacto, particularmente algo que ha sucedido. Esto puede incluir escenarios como mover el mouse sobre el elemento, hacer clic y seleccionar el botón de opción y también hacer clic en el elemento. El término incendios o el término despedido se usa muchas veces junto con el evento. Por ejemplo, el evento de pulsación de tecla se desencadena o se denomina más popularmente como activado, principalmente cuando se presiona la tecla. Aquí está la lista de los eventos DOM más comunes y de uso más frecuente.
Eventos de mouse como dblclick, mouseleave, mouseenter, click. Hay algunos otros eventos de teclado también como Keypress, keyup y keydown. Hay otras formas de eventos, como eventos de cambio, envío, desenfoque y enfoque. Hay otros eventos que son eventos de documento o ventana como cambiar el tamaño, cargar, desplazarse, descargar, etc. en Jquery, la mayoría de los eventos basados en DOM tienen el método jquery correspondiente. Por lo tanto, para asignar un nuevo evento a todos los párrafos existentes en la página, se puede utilizar la sintaxis a continuación.
Eventos y sintaxis de jQuery
Aquí están los siguientes eventos de jQuery con la sintaxis dada a continuación
1. Haga clic en ()
Este evento ocurre cada vez que se hace clic en el elemento. Este método click () se utiliza para activar el elemento cliqueado, también conocido como evento click, que se utiliza para adjuntar a una función cada vez que ocurre un evento relacionado con un clic.
Sintaxis
$(selector).click()
Cuando desee adjuntar una función a este evento de clic,
$(selector).click(function)
El siguiente paso siempre viene junto con la acción y el disparador que forma el funcionamiento y funcionamiento real de la función y, por lo tanto, cada vez que se dispara el evento, se debe pasar una función al evento.
Ejemplo
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Este método se utiliza para adjuntar una función de controlador de eventos al elemento HTML proporcionado. Esta función se ejecuta cada vez que el usuario hace doble clic en el elemento HTML dado.
Sintaxis
$(selector).dblclick()
Ejemplo
$("p").dblclick(function()(
$(this).hide();
));
3. cambiar ()
Este evento ocurre cada vez que se cambia el valor de un elemento en particular, es decir, solo funciona para la entrada, el área de texto y los elementos seleccionados. El método change () se utiliza para desencadenar un evento de cambio o el que se adjunta a la función cada vez que tiene que ocurrir un evento relacionado con el cambio.
Sintaxis
$(selector).change()
Ejemplo
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. desenfoque ()
Este evento relacionado con el desenfoque ocurre solo cuando el elemento pierde el foco. El método blur () que se usa para activar el evento blur o el que se usa para adjuntar una función que se ejecutará cada vez que ocurra un evento blur. Este método se usa a menudo con el método focus ().
Sintaxis
$(selector).blur()
Ejemplo
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. datos
Esta propiedad event.data se usa para contener los datos pasados opcionales relacionados con un método de evento cuando el controlador de ejecución para el actual está vinculado.
Sintaxis
event.data
Ejemplo
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. espacio de nombres
Esta propiedad se utiliza para devolver un espacio de nombres personalizado cada vez que se desencadena el evento. Los autores de complementos suelen establecer la propiedad, que se puede usar para manejar tareas de manera muy diferente, lo que depende del espacio de nombres que se use. Los espacios de nombres que comienzan con el guión bajo son espacios de nombres reservados para JQuery.
Sintaxis
event.namespace
Ejemplo
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Esta es la propiedad de tipo de página que se utiliza para devolver la posición del puntero del mouse que está relacionada con el borde lateral izquierdo del documento. Este tipo de propiedad a menudo se usa con el evento. Propiedad PageY.
Sintaxis
event.PageX
Ejemplo
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Esta es la propiedad de tipo de página que se utiliza para devolver la posición del puntero del mouse que está relacionada con el borde lateral superior del documento. Este tipo de propiedad a menudo se usa con el evento. Propiedad PageX.
Sintaxis
event.PageY
Ejemplo
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. resultado
La propiedad event.result se usa para contener el valor anterior o el último que devuelve el controlador de eventos que se activa específicamente por el evento específico.
Sintaxis
event.result
Ejemplo
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Este método event.preventDefault () relacionado con eventos se utiliza para detener la acción predeterminada de un elemento en particular. Los ejemplos de este escenario incluyen:
Evitar que un botón de envío envíe un formulario
Evitar que un enlace acceda a una URL particular.
Un evento particular como event.preventDefault () se usa para verificar si el método o la función preventDefault () se usa para llamar al evento.
Sintaxis
event.preventDefault()
Ejemplo
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Esta propiedad se usa para devolver qué elemento DOM debe ser activado por este evento. La mayoría de las veces es útil comparar el event.target con esto para determinar si el evento en particular se está manejando debido a un evento llamado burbujeo.
Sintaxis
event.target
Ejemplo
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Esta propiedad se usa para devolver el número de milisegundos desde el 1 de enero de 1970, que corresponde a la primera vez que el evento se activó por primera vez.
Sintaxis
event.TimeStamp
Ejemplo
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. tipo
Esto se usa para monitorear el evento y su tipo que se dispara.
Sintaxis
event.type
Ejemplo:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. cual ()
Esta propiedad se utiliza para devolver la tecla del teclado o el botón del mouse que se presionó para el evento.
Sintaxis
event.which
Ejemplo
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. foco ()
Esta propiedad y el foco de este evento se produce cuando se utiliza un elemento para obtener el foco que se produce cuando se selecciona haciendo clic con el mouse o navegando por una pestaña. El método focus () se usa para activar el evento de foco o adjuntar una función para que se ejecute cuando ocurre un evento relacionado con el foco.
Sintaxis
$(selector).focus()
Ejemplo
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Este método de desplazamiento se usa para especificar dos funciones que se ejecutan cuando el puntero del mouse se desplaza sobre todos los elementos que están seleccionados. Este método activa los eventos mouseleave y mouseenter. Si solo se especifica una función, se ejecutará para los eventos mouseleave y mouseenter.
Sintaxis
$(selector).hover(inFunction, outFunction)
Ejemplo
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
El orden de los eventos relacionados con el evento keydown es:
- Keydown: se usa cuando la tecla está bajando.
- Pulsación de tecla: esto ocurre cuando se presiona la tecla del teclado
- Keyup: como su nombre indica, esto se usa cuando se presiona la tecla del lado hacia arriba.
Sintaxis
$(selector).keydown()
Ejemplo
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. pulsación de tecla ()
El orden de los eventos relacionados con el evento de pulsación de tecla es:
- Keydown: se usa cuando la tecla está bajando.
- Pulsación de tecla: esto ocurre cuando se presiona la tecla del teclado
- Keyup: como su nombre indica, esto se usa cuando se presiona la tecla del lado hacia arriba.
Sintaxis
$(selector).keypress()
Ejemplo
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
El orden de los eventos relacionados con el evento keyup es:
- Keydown: se usa cuando la tecla está bajando.
- Pulsación de tecla: esto ocurre cuando se presiona la tecla del teclado
- Keyup: como su nombre indica, esto se usa cuando se presiona la tecla del lado hacia arriba.
Sintaxis
$(selector).keyup()
Ejemplo
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Este método o función lives () de jquery se usa para adjuntar uno o más controladores basados en eventos que se usarán particularmente para las listas de elementos seleccionados y también especifica la función que se ejecutará donde ocurran los eventos. Todos los controladores de eventos se adjuntan utilizando el método live () que funcionará tanto para los elementos actuales como para los FUTUROS, que se basan en la coincidencia de los elementos del selector que pueden ser como un nuevo elemento creado por el script. El método die () puede usarse para destruir el método live ().
Sintaxis
$(selector).live(event, data, function)
Ejemplo
$("button").live("click", function()(
$("p").slideToggle();
));
21. Load ()
El método de carga se utiliza para adjuntar un controlador de eventos al evento basado en la carga. El evento de carga ocurre siempre que se especifique. Este evento ocurre y funciona siempre que los elementos asociados con la URL, como imagen, marco, script, iframe y el objeto de ventana. El evento de carga puede o no activarse y depende del navegador incluso si la imagen está en caché. También hay un método AJAX que es un método jquery conocido como load (), el que se llama depende de los parámetros.
Sintaxis
$(selector).load(function)
Ejemplo
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Este evento ocurre solo cuando se presiona el botón izquierdo del puntero del mouse sobre la lista seleccionada del elemento. El método o función mousedown () se usa para activar este evento que adjunta una función y se ejecuta cada vez que ocurre un evento mousedown. Este método a menudo se usa junto con el método mouseup ().
Sintaxis
$(selector).mousedown()
Ejemplo
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Desactivado ()
Este método se utiliza para eliminar un controlador de eventos que se adjunta junto con el método on (). Se puede decir que es el reemplazo del método unbind (), método die () y método undelegate (). Este método se utiliza para aportar mucha coherencia a la API y siempre se recomienda hacer uso de este método, ya que se utiliza para simplificar la base del código Jquery.
Sintaxis
$(selector).off(event, selector, function(eventObj), map)
Ejemplo
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Este evento ocurre cada vez que el puntero del mouse se encuentra sobre el elemento especificado y entra cuando activa el evento mouseenter o se usa para adjuntar una función que se puede usar para ejecutarse cada vez que ocurre un evento basado en mouseenter.
Sintaxis
$(selector).mouseenter()
Ejemplo
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Este evento ocurre cada vez que el puntero del mouse se encuentra sobre el elemento especificado y se va cuando activa el evento de hojas del mouse o se usa para desacoplar una función que se puede usar para ejecutarse cada vez que ocurre un evento basado en mouseleave.
Sintaxis
$(selector).mouseleave()
Ejemplo
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery es una de las bibliotecas más utilizadas cuando se trata de desarrollo front-end. Esto proporciona características únicas y una amplia gama de funciones que ayudan a hacer que la vida de los desarrolladores y las personas sea fácil y conveniente. Espero que les haya gustado nuestro artículo. Estén atentos a nuestro blog para más como estos.
Artículos recomendados
Esta es una guía de jQuery Events. Aquí discutimos la lista de los diversos eventos más comunes y utilizados con frecuencia de jQuery con sintaxis y ejemplos. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Efectos jQuery
- Métodos jQuery
- Atributos de jQuery
- ¿Cómo instalar Jquery?
- Los 8 mejores selectores jQuery con implementación de código
- Guía de ejemplos de la barra de progreso de JQuery
- Guía de diferentes eventos de JavaScript