El addEventListener() método
Ejemplo
Añadir un detector de eventos que se activa cuando un usuario hace clic en un botón:
document.getElementById("myBtn").addEventListener("click", displayDate); Inténtalo tú mismo " El addEventListener() método se conecta un controlador de eventos para el elemento especificado.
El addEventListener() método se conecta un controlador de eventos a un elemento sin sobrescribir los controladores de eventos existentes.
Usted puede agregar muchos controladores de eventos a un elemento.
Usted puede agregar muchos controladores de eventos del mismo tipo a un elemento, es decir, dos "click" eventos.
Se pueden añadir detectores de eventos a cualquier objeto DOM no sólo los elementos HTML. es decir, el objeto de la ventana.
El addEventListener() método hace que sea más fácil controlar cómo el evento reacciona a burbujeo.
Cuando se utiliza el addEventListener() método, el código JavaScript se separa del marcado HTML, facilitando la visualización y permite añadir detectores de eventos, incluso cuando usted no controla el formato HTML.
Usted puede quitar fácilmente un detector de eventos utilizando el removeEventListener() método.
Sintaxis
element .addEventListener( event, function, useCapture );El primer parámetro es el tipo de evento (como el "click" o "mousedown" ).
El segundo parámetro es la función que queremos llamar cuando se produce el evento.
El tercer parámetro es un valor booleano que especifica si se debe utilizar el burbujeo evento o captura de eventos. Este parámetro es opcional.
Tenga en cuenta que no utiliza el "on" prefijo para el evento; usar "click" en lugar de "onclick" .
Agregar un controlador de eventos a un Elemento
Ejemplo
Alerta "Hello World!" cuando el usuario hace clic en un elemento:
element .addEventListener("click", function(){ alert("Hello World!"); }); Inténtalo tú mismo " También puede hacer referencia a una función externa "llamada":
Ejemplo
Alerta "Hello World!" cuando el usuario hace clic en un elemento:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Inténtalo tú mismo " Añadir Muchos controladores de eventos al mismo elemento
El addEventListener() método permite agregar muchos eventos al mismo elemento, sin sobrescribir los eventos existentes:
Ejemplo
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Inténtalo tú mismo " Se pueden añadir eventos de diferentes tipos al mismo elemento:
Ejemplo
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Inténtalo tú mismo " Agregar un controlador de eventos al objeto de ventana
El addEventListener() método le permite añadir detectores de eventos en cualquier objeto DOM HTML como elementos HTML, el documento HTML, el objeto de la ventana, u otros objetos que apoyan eventos, como el xmlHttpRequest objeto.
Ejemplo
Añadir un detector de eventos que se activa cuando un usuario cambia el tamaño de la ventana:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Inténtalo tú mismo " Paso de parámetros
Al pasar valores de parámetros, utilizar una "función anónima" que llama a la función especificada con los parámetros:
El burbujear evento o Captura de eventos?
Hay dos formas de la propagación de eventos en el DOM de HTML, burbujeantes y captura.
la propagación de eventos es una forma de definir el orden de los elementos cuando se produce un evento. Si usted tiene un <p> elemento dentro de un <div> elemento, y el usuario hace clic en el <p> elemento, que de elemento de "click" evento debe ser manejada por primera vez?
En caso de que el burbujeo de la mayor parte del elemento interior se maneja primero y luego el exterior: el <p> Haga clic en el evento del elemento se maneja en primer lugar, a continuación, el <div> Haga clic en el evento del elemento.
En caso de que el capturar la mayor parte del elemento exterior se maneja primero y luego el interior: el <div> Haga clic en el evento del elemento será tratada en primer lugar, a continuación, el <p> Haga clic en el evento del elemento.
Con la addEventListener() método que se puede especificar el tipo de propagación mediante el uso de la "useCapture" parámetro:
addEventListener( event , function , useCapture );El valor predeterminado es falso, que utilizará la propagación burbujeo, cuando el valor se establece en true, el evento utiliza la propagación de captura.
Ejemplo
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Inténtalo tú mismo " El removeEventListener() método
El removeEventListener() método elimina los controladores de eventos que se han adjuntado a la addEventListener() método:
Soporte para el navegador
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con estos métodos.
| Método | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Nota: El addEventListener() y removeEventListener() métodos no son compatibles con IE 8 y versiones anteriores y Opera 6.0 y versiones anteriores. Sin embargo, para estas versiones específicas del navegador, puede utilizar la attachEvent() método para conectar un controladores de eventos para el elemento, y el detachEvent() método para eliminarlo:
element. attachEvent (event, function);
element. detachEvent (event,
function); Ejemplo
solución multi-navegador:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
Inténtalo tú mismo " HTML DOM evento de referencia de objetos
Para obtener una lista de todos los eventos DOM HTML, visita nuestra completa HTML DOM evento de referencia del objeto .