Ejemplo
Adjuntar un evento de clic a un <button> elemento. Cuando el usuario hace clic en el botón, la salida "Hello World" en un <p> elemento con id = "demo":
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El addEventListener() método se une un controlador de eventos con el elemento especificado.
Consejo: Utilice la removeEventListener() método para eliminar un controlador de eventos que se ha unido con el addEventListener() método.
Consejo: Utilice el documento. addEventListener() método para adjuntar un controlador de eventos para el documento.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Nota: El addEventListener() método no es compatible en Internet Explorer 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 asociar controladores de eventos (see "More Examples" below for a cross-browser solution) .
Sintaxis
element .addEventListener( event , function ,
useCapture )
Los valores de los parámetros
| Parámetro | Descripción |
|---|---|
| event | Necesario. Una cadena que especifica el nombre del evento. Nota: No utilice el "on" prefijo. Por ejemplo, utilice "click" en lugar de "onclick" . Para obtener una lista de todos los eventos DOM HTML, visita nuestra completa HTML DOM evento de referencia del objeto . |
| function | Necesario. Especifica la función a ejecutar cuando se produzca el evento. Cuando se produce el evento, un objeto de evento se pasa a la función que el primer parámetro. El tipo del objeto de evento depende del evento especificado. Por ejemplo, el "click" evento pertenece al objeto MouseEvent. |
| useCapture | Opcional. Un valor booleano que especifica si el evento debe ser ejecutado en la captación o en la fase de propagación. Valores posibles:
|
Detalles técnicos
| DOM Versión: | DOM nivel 2 Eventos |
|---|---|
| Valor de retorno: | Sin valor de retorno |
| cambios: | El parámetro useCapture se hizo opcional en Firefox 6 y Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Más ejemplos
Ejemplo
También puede referirse a un externo "named" función.
Este ejemplo muestra cómo ejecutar una función cuando un usuario hace clic en un <button> elemento:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Inténtalo tú mismo " Ejemplo
Se pueden añadir muchos eventos al mismo elemento, sin sobrescribir los eventos existentes.
Este ejemplo muestra cómo agregar dos eventos de clic en el mismo <button> elemento:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Inténtalo tú mismo " Ejemplo
Se pueden añadir eventos de diferentes tipos al mismo elemento.
Este ejemplo muestra cómo agregar muchos eventos en el mismo <button> elemento:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); Inténtalo tú mismo " Ejemplo
Al pasar valores de parámetros, utilice una "anonymous function" que llama a la función especificada con los parámetros:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Inténtalo tú mismo " Ejemplo
Cambiar el color de fondo de un <button> elemento:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Inténtalo tú mismo " Ejemplo
Usando el parámetro useCapture opcional para demostrar la diferencia entre el burbujeo y la captura:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); Inténtalo tú mismo " Ejemplo
Uso de la removeEventListener() método para eliminar un controlador de eventos que se ha unido con el addEventListener() método:
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); Inténtalo tú mismo " Ejemplo
Para los navegadores que no soporten el addEventListener() método, se puede utilizar el attachEvent() método.
Este ejemplo demuestra una 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 " Páginas relacionadas
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Referencia: documento. addEventListener()