Cómo agregar un controlador de eventos a un elemento en JavaScript
Cómo agregar un controlador de eventos a un elemento en JavaScript
JavaScript proporciona addEventListener () que le permite agregar un controlador de eventos a un elemento HTML. Este método une un evento a un elemento HTML, además, agrega un controlador de eventos a un elemento HTML particular sin sobrescribir ningún controlador de eventos que ya exista en ese elemento.
Sintaxis
elemento.addEventListener (eventType, eventListener);
Ejemplo
Supongamos que desea agregar un controlador de eventos que vincule el evento de clic en un elemento.
En el ejemplo anterior, estamos creando un botón usando la siguiente pieza de código.
Usando el método addEventListener (), estamos conectando un evento de clic al botón.
documento.getElementById ("botón").addEventListener ("hacer clic", functionName);función functionName ()
documento.getElementById ("Tutorial").innerhtml = "Me hiciste clic en!";
Cuando haga clic en el botón, aparecerá una nota diciéndole que acaba de hacer clic en el botón. Hemos mostrado la salida a continuación.
Más sobre los manejadores de eventos!
1. Es posible agregar varios manejadores de eventos o varios manejadores de eventos del mismo tipo a un elemento particular.
Ejemplo
El siguiente es un ejemplo de agregar dos eventos de KeyPress a un campo de entrada usando el método AddEventListener ().
En el ejemplo anterior, la siguiente pieza de código agrega dos eventos de KeyPress a un campo de entrada.
función FirstFunction ()alerta ("El primer evento de KeyPress sucedió!");
function SecondFunction ()
alerta ("Segundo evento de KeyPress sucedió!");
Cuando presione una tecla de teclado mientras está dentro del campo de entrada, se producirá el primer evento de KeyPress.
Después de hacer clic en Aceptar en el cuadro de diálogo, la segunda KeyPress sucederá.
2. Los manejadores de eventos también se pueden agregar a los objetos DOM.
3. Los manejadores de eventos dedican el comportamiento de los eventos sobre cómo reaccionan en burbujear.
4. Para aumentar la legibilidad, JavaScript se divide del marcado HTML cuando se utiliza el método addEventListener ().
5. Mientras usa el método addEventListener (), también puede usar la captura de burbujas o eventos de eventos, pero es totalmente opcional.
En evento, burbujeando, el evento de la mayoría de los elementos internos se opera primero y el evento de la mayoría de los elementos exteriores más tarde. Sin embargo, en el evento, capturar el evento del elemento más externo se opera primero y el evento del elemento más interno más tarde.
La sintaxis para usar burbujeo de eventos y captura de eventos es la siguiente.
elemento.addEventListener (evento, función, useCapture);
Nota: En la sintaxis anterior, de forma predeterminada, el valor del parámetro es falso, lo que significa que se producirá burbujas de eventos, pero si pasa el valor del parámetro como verdadero, la captura de eventos sucederá.
Ejemplo
El siguiente es un ejemplo de propagación burbujeante.
Esta es una propagación burbujeante.
En el ejemplo anterior, estamos creando un
Elemento como elemento y elemento principal como elemento infantil.
Esta es una propagación burbujeante.
Usando luego se usa para agregar un evento de clic usando el método addEventListener () junto con la propagación de burbujas.
documento.getElementById ("Button1").addEventListener ("hacer clic", function ()alerta ("Hiciste clic en el botón!");
, FALSO);
documento.getElementById ("para1").addEventListener ("hacer clic", function ()
alerta ("Hiciste clic en el párrafo!");
, FALSO);
Cuando ejecute este programa y haga clic en el botón primero, luego la propagación burbujeante operará el evento de clic en el botón (elemento más interno) primero y el párrafo (elemento más exterior) más tarde. Aquí está la salida.
Ahora, cuando haga clic en Aceptar, la propagación burbujeante realizará un evento de clic en el párrafo.
Usando el mismo ejemplo, si pasa el valor del parámetro como verdadero, entonces la captura de propagación se producirá.
Esta es una propagación burbujeante.
Si hace clic en el elemento infantil (botón) primero, la captura de propagación operará el evento de clic en el párrafo (elemento más exterior) primero y el botón (elemento más interno) más tarde. Hemos mostrado la salida a continuación.
Después de hacer clic en Aceptar, haga clic en el evento se realizará en el elemento.
6. También es posible eliminar un controlador de eventos utilizando el método de removeventListener ().
Conclusión
JavaScript proporciona un método addEventListener () que le permite unir un controlador de eventos a un elemento. Puede adjuntar varios manejadores de eventos del mismo tipo a un elemento particular, además, además de los elementos HTML, también puede agregar manejadores de eventos a objetos DOM. También puede agregar propagación burbujeante y capturar propagación utilizando el método addEventListener (). Este artículo discute en detalle, enfoques de agregar controladores de eventos a un elemento que usa JavaScript junto con ejemplos adecuados.