Documento HTML DOM addEventListener()
Ejemplos
Agregue un evento de clic al documento:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Sintaxis más simple:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Más ejemplos a continuación.
Definición y uso
El addEventListener()
método adjunta un controlador de eventos al documento.
Ver también:
El tutorial HTML DOM EventListener
El método removeEventListener() del documento
Sintaxis
document.addEventListener(event, function, useCapture)
Parámetros
Parameter | Description |
event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Valor devuelto
NONE |
Más ejemplos
Puede agregar muchos detectores de eventos al documento:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Puede agregar diferentes tipos de eventos:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Al pasar parámetros, use una "función anónima" para llamar a una función con los parámetros:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Cambiar el color de fondo del documento:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Usando el método removeEventListener():
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Compatibilidad con navegador
document.addEventListener
es una característica DOM Nivel 2 (2001).
Es totalmente compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |