Latest web development tutorials
×

JavaScript curso

JavaScript curso JavaScript breve introducción JavaScript uso JavaScript exportación JavaScript gramática JavaScript declaraciones JavaScript nota JavaScript variable JavaScript Tipos de datos JavaScript objetos JavaScript función JavaScript alcance JavaScript evento JavaScript cadena JavaScript operadores JavaScript comparar JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript tipo de conversión JavaScript Las expresiones regulares JavaScript error JavaScript depuración JavaScript variable de elevación JavaScript Modo estricto JavaScript El uso inapropiado JavaScript autenticación de formularios JavaScript Palabras clave reservadas JavaScript JSON JavaScript void JavaScript Especificación código

JS función

JavaScript definición de la función JavaScript Argumentos de función JavaScript llamada a la función JavaScript Los cierres

JS HTML DOM

DOM breve introducción DOM HTML DOM CSS DOM evento DOM EventListener DOM elemento

JS Tutorial avanzado

JavaScript objetos JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp objetos

JS navegador BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript música pop JavaScript Evento cronometrado JavaScript Cookies

JS almacén

JavaScript almacén JavaScript prueba jQuery JavaScript prueba Prototype

JS Ejemplos

JavaScript Ejemplos JavaScript instancia de objeto JavaScript instancia de objeto del navegador JavaScript HTML DOM Ejemplos JavaScript resumen

JS Manual de referencia

JavaScript objetos HTML DOM objetos

JavaScript HTML DOM EventListener

método addEventListener ()

Ejemplos

Escucha de eventos desencadena cuando el usuario hace clic en el botón:

. Document.getElementById ( "myBtn") addEventListener ( "clic", displayDate);

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

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

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 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!":

.addEventListener elemento ( "clic", la función () {alert ( "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!":

.addEventListener elemento ( "clic", myFunction );

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", myFunction );
.addEventListener elemento ( "clic", mySecondFunction );

Trate »

Se puede añadir a los mismos elementos en diferentes tipos de eventos:

Ejemplos

.addEventListener elemento ( "mouseover", myFunction );
.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:

window.addEventListener ( "redimensionar", function () {
. 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":

Ejemplos

.addEventListener elemento ( "clic", la función () {myFunction (P1, P2);});

Trate »


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:

addEventListener (acontecimiento, función, useCapture) ;

El valor predeterminado es falso, que está en ebullición que, cuando el valor es true, utilice el evento para capturar transferencia.

Ejemplos

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

Trate »


removeEventListener método ()

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

Ejemplos

.removeEventListener elemento ( "mousemove", myFunction );

Trate »


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.attachEvent (acontecimiento, función);
element.detachEvent (acontecimiento, función);

Ejemplos

solución multi-navegador:

var x = document.getElementById ( "myBtn");
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 .