HTML DOM método addEventListener ()

Ejemplos

Añadir un evento click en el documento. Cuando el usuario hace clic en cualquier parte del documento, el id = "demo" de la <p> salida del elemento "Hello World":

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

Trate »

Definición y Uso

document.addEventListener método () se utiliza para agregar un controlador de eventos para el documento.

Consejo: Puede utilizar document.removeEventListener () método para quitar el método addEventListener () para agregar controladores de eventos.

Consejo: Utilice . Elemento addEventListener () elemento Método especificado en el controlador de eventos.

Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión del método.

camino
addEventListener ()	1.0	9.0	1.0	1.0	7.0

Nota: Internet Explorer 8 y versiones anteriores de IE no son compatibles con el método addEventListener (), Opera 7.0 y versiones anteriores no son compatibles con Opera. Sin embargo, este tipo de versión del navegador se puede utilizar el método attachEvent () para agregar un controlador de eventos (los problemas de compatibilidad entre navegadores pueden ver más ejemplos "").

gramática

document.addEventListener (acontecimiento, función, useCapture)

parámetro Valor

parámetros	descripción
evento	Requerido. nombre de la cadena de la descripción del evento. Nota: No utilice el prefijo "on". Por ejemplo, utilice "clic" en lugar de "onclick". Consejo: Todos los eventos DOM HTML, se puede ver nuestra completa HTML DOM evento de referencia del objeto .
función	Requerido. En él se describen las funciones después de que el evento ha causado. Cuando se activa el evento, el objeto de evento como primer argumento pasado a la función. objeto de tipo de evento depende del evento en particular. Por ejemplo, "clic" evento pertenece MouseEvent objeto (evento de ratón).
useCapture	Opcional. Un valor booleano que especifica si la ejecución del evento en la captura o la fase de propagación. Valores posibles: verdad - controlador de eventos ejecutado durante la fase de captura predeterminado falsos. Los controladores de eventos se ejecutan en la fase de propagación

detalles técnicos

Versión DOM:	DOM nivel 2 Eventos
Devuelve:	Se desconoce el valor de retorno
registros:	En Firefox 6 y Opera 11.60 en useCapture parámetro es opcional. (En Chrome, IE y Safari ha sido siempre opcional).

más ejemplos

Ejemplos

Puede ser referido a la función externa nombre de la función:

document.addEventListener ( "clic", myFunction);

myFunction función () {
. Document.getElementById ( "demo") innerHTML = "Hello World";
}

Trate »

Ejemplos

Puede añadir tantos eventos en el documento, añadiendo que el evento no se sobreponen a los sucesos existente.

En este ejemplo se muestra cómo agregar un evento click en dos documentos:

document.addEventListener ( "clic", myFunction);
document.addEventListener ( "clic", someOtherFunction);

Trate »

Ejemplos

Se pueden añadir diferentes tipos de eventos en el documento.

Este ejemplo muestra cómo agregar múltiples eventos en un documento:

document.addEventListener ( "mouseover", myFunction);
document.addEventListener ( "clic", someOtherFunction);
document.addEventListener ( "mouseout", someOtherFunction);

Trate »

Ejemplos

Al pasar un valor de parámetro, utilice la llamada de función con los parámetros "función anónima":

document.addEventListener ( "clic", function () {
myFunction (P1, P2);
});

Trate »

Ejemplos

Modificar <body> del fondo:

document.addEventListener ( "clic", function () {
document.body.style.backgroundColor = "red";
});

Trate »

Ejemplos

Utilizando el método removeEventListener () para eliminar a través del método addEventListener () para agregar controladores de eventos:

// Añadir un controlador de eventos para el documento
document.addEventListener ( "mousemove", myFunction);

// Eliminar el controlador de eventos documento
document.removeEventListener ( "mousemove", myFunction);

Trate »

Ejemplos

Si su navegador no soporta método addEventListener (), puede utilizar el método attachEvent () en su lugar.

El siguiente ejemplo demuestra la solución multi-navegador:

si (document.addEventListener) {// todos los principales navegadores, excepto IE 8 y versiones anteriores de IE
document.addEventListener ( "clic", myFunction);
} Else if (document.attachEvent) {// IE 8 y versiones anteriores de IE
document.attachEvent ( "onclick", myFunction);
}

Trate »