HTML DOM addEventListener()Método

元素对象参考手册Objeto de elemento

Ejemplo

Agregue un evento de clic al elemento <button>. Cuando el usuario haga clic en el botón, muestre "Hello World" en el elemento <p> con id="demo":

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

Pruébelo »

Definición y uso

El método addEventListener() se utiliza para agregar un controlador de eventos al elemento especificado.

Consejo:UseremoveEventListener()el método para eliminar el controlador de eventos agregado por el método addEventListener().

Soporte del navegador

Los números en la tabla indican la versión del primer navegador que admite el método.

Método
addEventListener() 1.0 9.0 1.0 1.0 7.0

Nota:Internet Explorer 8 y versiones anteriores de IE no admiten el método addEventListener(), y Opera 7.0 y versiones anteriores de Opera tampoco lo admiten. Sin embargo, para estos navegadores que no admiten esta función, puede usarattachEvent()el método para agregar controladores de eventos (consulte "Más ejemplos" para conocer la solución compatible con varios navegadores).

Sintaxis

element.addEventListener(event, function, useCapture)

Valores de parámetros

Parámetro Descripción
event Obligatorio. Cadena, especifica el nombre del evento.

Nota:No use el prefijo "on". Por ejemplo, use "click", no "onclick".

Consejo:Todos los eventos del DOM de HTML, puede consultar nuestro manual completo deReferencia del objeto Evento del DOM de HTML。
function Obligatorio. Especifica la función que se ejecutará cuando se active el evento.

El objeto de evento se pasa a la función como primer parámetro. El tipo de objeto de evento depende del evento específico. Por ejemplo, el evento "click" pertenece al objeto MouseEvent (evento de ratón).
useCapture Opcional. Valor booleano, especifica si el evento se ejecuta en la fase de captura o de burbujeo.

Valores posibles:
  • true - El controlador de eventos se ejecuta en la fase de captura
  • false - Por defecto. El controlador de eventos se ejecuta en la fase de burbujeo.

Detalles técnicos

Versión del DOM: DOM Level 2 Events
Valor de retorno: Sin valor de retorno
Registro: En Firefox 6 y Opera 11.60, el parámetro useCapture es opcional. (En Chrome, IE y Safari siempre ha sido opcional).

Más ejemplos

Ejemplo

Puede hacer referencia a una función externa por su nombre.

Este ejemplo demuestra cómo ejecutar una función cuando el usuario hace clic en el elemento <button>:

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

Pruébelo »

Ejemplo

Puede agregar muchos eventos en el documento; los eventos agregados no sobrescriben los eventos existentes.

Este ejemplo demuestra cómo agregar dos eventos de clic en el elemento <button>:

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

Pruébelo »

Ejemplo

Puede agregar diferentes tipos de eventos al mismo elemento.

Este ejemplo demuestra cómo agregar múltiples eventos al mismo elemento <button>:

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

Pruébelo »

Ejemplo

Cuando se pasan valores de parámetros, use una "función anónima" para llamar a una función con parámetros:

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

Pruébelo »

Ejemplo

Modifica el fondo del elemento <button>:

document.getElementById("myBtn").addEventListener("click", function(){
    this.style.backgroundColor = "red";
});

Pruébelo »

Ejemplo

Use el parámetro opcionaluseCapturepara demostrar la diferencia entre las fases de burbujeo y captura:

document.getElementById("myDiv").addEventListener("click", myFunction, true);

Pruébelo »

Ejemplo

Use el método removeEventListener() para eliminar el controlador de eventos agregado por el método addEventListener():

// Agregar controlador de eventos <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Eliminar controlador de eventos <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

Pruébelo »

Ejemplo

Si el navegador no admite el método addEventListener(), puede usar el método attachEvent() como alternativa.

El siguiente ejemplo demuestra una solución compatible con múltiples navegadores:

var x = document.getElementById("myBtn");
if (x.addEventListener) { // Todos los navegadores principales, excepto IE 8 y versiones anteriores de IE
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 y versiones anteriores de IE
    x.attachEvent("onclick", myFunction);
}

Pruébelo »

Páginas relacionadas

Tutorial de JavaScript:HTML DOM EventListener

Manual de referencia de JavaScript:document.addEventListener()

元素对象参考手册Objeto de elemento

Otras extensiones