HTML DOM método addEventListener ()

Ejemplos

Para el botón <> para añadir un evento de clic. Cuando el usuario hace clic en el botón en el id = "demo" de la <p> salida del elemento "Hello World":

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

Trate »

Definición y Uso

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

Consejo: Utilice la removeEventListener () método para quitar el método addEventListener () para agregar controladores 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, no son compatibles con la función del navegador, puede utilizar el método attachEvent () para agregar un controlador de eventos (ver "Más ejemplos de" solución multi-navegador).

gramática

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

parámetro Valor

parámetros	descripción
evento	Must. Una cadena que especifica el nombre del evento. Nota: No utilice el prefijo "on". Por ejemplo, utilice "click", en lugar de "onclick". Consejo: Todos los eventos DOM HTML, se puede ver nuestra completa HTML DOM evento de referencia del objeto .
función	Must. Función que se ejecutará cuando el evento especificado desencadena. Cuando 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 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
registro:	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 hacer referencia a la función externa por nombre de la función.

Este ejemplo muestra cómo realizar un usuario hace clic el botón <> Función del elemento:

. Document.getElementById ( "myBtn") 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.

Este ejemplo muestra cómo agregar dos evento de clic en el elemento <botón>:

. Document.getElementById ( "myBtn") addEventListener ( "clic", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "clic", someOtherFunction);

Trate »

Ejemplos

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

Este ejemplo muestra cómo agregar múltiples eventos con un elemento <botón>:

. Document.getElementById ( "myBtn") addEventListener ( "mouseover", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "clic", someOtherFunction);
. Document.getElementById ( "myBtn") 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.getElementById ( "myBtn"). addEventListener ( "clic", function () {
myFunction (P1, P2);
});

Trate »

Ejemplos

Modificar los botones <> elementos de fondo:

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

Trate »

Ejemplos

Utilice los parámetros opcionales para demostrar diferentes fases burbujeantes useCapture y captura:

. Document.getElementById ( "myDiv") addEventListener ( "clic", myFunction, true);

Trate »

Ejemplos

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

// Añadir <div> controlador de eventos
. Document.getElementById ( "myDiv") addEventListener ( "mousemove", myFunction);

// Eliminar <div> controlador de eventos
. Document.getElementById ( "myDiv") 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:

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

Trate »