JavaScript HTML DOM EventListener
método addEventListener ()
Ejemplos
Escucha de eventos desencadena cuando el usuario hace clic en el botón:
Trate »
método addEventListener () se utiliza para agregar un controlador de eventos a un elemento especificado.
addEventListener () para agregar el controlador de eventos no sobrescribe el controlador de eventos existente.
Puede agregar varios controladores de eventos a un elemento.
Puede añadir más de uno del mismo tipo de controlador de eventos al mismo elemento, como por ejemplo: dos "clic" del evento.
Se pueden agregar objetos a cualquier detector de eventos DOM, no sólo los elementos HTML. Tales como: ventana de objeto.
método addEventListener () puede controlar más fácilmente evento (burbujeo y la captura).
Cuando se utiliza el método addEventListener (), las etiquetas HTML de JavaScript de izquierda a tallar, más legible, en ausencia de etiquetas de control HTML también puede añadir detectores de eventos.
Usted puede utilizar el método removeEventListener () para eliminar un detector de eventos.
gramática
El primer parámetro es el tipo (por ejemplo, "clic" o "mousedown") evento.
El segundo argumento es la llamada a la función se activa después del evento.
El tercer parámetro es un valor booleano que se utiliza para describir un evento o burbujeo de captura. Este parámetro es opcional.
Nota: No utilice el prefijo "on". Por ejemplo, utilice "click", en lugar de "onclick". |
elementos originales añadir un controlador de eventos
Ejemplos
Cuando el usuario hace clic en el elemento emergente cuando el "Hello World!":
Trate »
Se puede utilizar el nombre de la función para hacer referencia a una función externa:
Ejemplos
Cuando el usuario hace clic en el elemento emergente cuando el "Hello World!":
myFunction función () {
alert ( "Hello World!");
}
Trate »
Agregar controladores de eventos múltiples al mismo elemento
método addEventListener () le permite añadir múltiples eventos a los mismos elementos, y no sobrescribe los eventos existentes:
Ejemplos
.addEventListener elemento ( "clic", mySecondFunction );
Trate »
Se puede añadir a los mismos elementos en diferentes tipos de eventos:
Ejemplos
.addEventListener elemento ( "clic", mySecondFunction );
.addEventListener elemento ( "mouseout", myThirdFunction );
Trate »
Agregue un controlador de eventos al objeto de ventana
método addEventListener () le permite añadir objetos en el detector de eventos DOM HTML, objetos HTML DOM, tales como: los elementos HTML, documentos HTML, objeto de la ventana. Los objetos de evento u otros gastos, tales como: objeto XMLHttpRequest.
Ejemplos
Cuando el usuario restablece el tamaño de la ventana para añadir detectores de eventos:
. Document.getElementById ( "demo") innerHTML = SomeText;
});
Trate »
Paso de parámetros
Al pasar un valor de parámetro, utilice la llamada de función con los parámetros "función anónima":
captura de eventos o la propagación de eventos?
La entrega de eventos de dos maneras: burbujeo y de captura.
El orden de entrega de sucesos de los elementos definidos evento de disparo. Si <p> elemento en el elemento <div>, el elemento usuario hace clic <p>, cuyo elemento del evento "clic", que se activará ella?
Burbujeante, el evento será un elemento interno se activa y active los elementos externos, a saber: un evento de clic <p> elemento se activa en primer lugar, a continuación, activa el evento click elemento <div>.
En la captura, el evento será un elemento externo se activa, los elementos internos a continuación se presenta el suceso, a saber: el elemento <div> para desencadenar un evento de clic y, a continuación, desencadenar un evento de clic <p> elemento.
método addEventListener () para especificar el parámetro "useCapture" para establecer el tipo de entrega:
El valor predeterminado es falso, que está en ebullición que, cuando el valor es true, utilice el evento para capturar transferencia.
removeEventListener método ()
removeEventListener () para eliminar 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 |
removeEventListener () | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Nota: IE 8 y versiones anteriores de IE, Opera 7.0 y versiones anteriores no son compatibles con el método addEventListener () y removeEventListener (). Sin embargo, este tipo de versión del navegador se puede utilizar el método detachEvent () para eliminar un controlador de eventos:
element.detachEvent (acontecimiento, función);
Ejemplos
solución multi-navegador:
si (x.addEventListener) {// todos los principales navegadores, excepto IE 8 y versiones anteriores
x.addEventListener ( "clic", myFunction);
} Else if (x.attachEvent) {// IE 8 y versiones anteriores
x.attachEvent ( "onclick", myFunction);
}
Trate »
HTML DOM evento de referencia de objetos
Todos los eventos DOM HTML, se puede ver nuestra completa HTML DOM evento de referencia del objeto .