Ejemplo
Adjuntar un evento de clic al documento. Cuando el usuario hace clic en cualquier parte del documento, la producción de "Hello World" en un <p> elemento con id = "demo":
document.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 document. addEventListener() document. addEventListener() método se une un controlador de eventos para el documento.
Consejo: Utilice el documento. removeEventListener() método para eliminar un controlador de eventos que se ha unido con el addEventListener() método.
Consejo: Utilice el elemento. addEventListener() método para adjuntar un controlador de eventos a un elemento especificado.
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
document.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:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Inténtalo tú mismo " Ejemplo
Se pueden añadir muchos eventos al documento, sin sobrescribir los eventos existentes.
Este ejemplo muestra cómo agregar dos eventos de clic al documento:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Inténtalo tú mismo " Ejemplo
Se pueden añadir eventos de diferentes tipos en el documento.
Este ejemplo muestra cómo agregar muchos eventos al documento:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.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.addEventListener("click", function() {
myFunction(p1, p2);
}); Inténtalo tú mismo " Ejemplo
Cambiar el color de fondo del documento <body> elemento:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); 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 the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.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:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Inténtalo tú mismo " Páginas relacionadas
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Referencia: elemento. addEventListener()