¿Quieres mejorar tu habilidad en el desarrollo web? ¡Entonces no te puedes perder el evento delegado de jQuery! En este artículo de TIEngranaje te explicamos todo lo que necesitas saber sobre este tema clave en la programación web moderna. Desde su definición hasta su implementación práctica, descubre cómo el evento delegado puede mejorar la eficiencia y la funcionalidad de tus proyectos web. ¡Sigue leyendo y conviértete en un experto en jQuery!
El evento jQuery delegate() el método adjunta uno o mas controladores de eventos para elementos específicos que son hijos de elementos seleccionados y especifica una función para ejecutar cuando ocurren los eventos. Además, los controladores de eventos que son adjunto usando el jQuery delegate() El método funcionará tanto para los elementos actuales como para los futuros.
A partir de jQuery 1.7, el .delegate() método ha sido reemplazado por el .on() método. Para versiones anteriores, sigue siendo el medio más eficaz para utilizar la delegación de eventos.
Sintaxis
$(selector).delegate(childSelector,event,data,function)| Parámetro | Descripción |
|---|---|
childSelector |
Adjunte el controlador de eventos a uno o más elementos secundarios especificados |
event |
Uno o más eventos para adjuntar. Los valores de los eventos están separados por espacios. |
data |
Datos opcionales para pasar a la función |
function |
Función para ejecutar cuando ocurran los eventos |
Ejemplo básico
En el siguiente ejemplo de jQuery, el delegate() método adjunta el click evento al elemento con un id de imgMouse. Cuando se hace clic en el elemento, se ejecutará la función especificada.
En este ejemplo, el div el elemento se mostrará u ocultará cuando el icono del ratón esté hizo clic. Puede copiar y editar el código jQuery utilizando nuestro editor de HTML en línea.
<div id="divParent">
<img id="imgMouse"src="#" />
<div id="divChild">
<div id="divText">
Click the mouse icon to toggle this display!
</div>
</div>
$("divParent").delegate("#imgMouse", "click", function () {
$("#divChild").slideToggle();
});