Anidada Manejo de Eventos en JavaScript (el desplazamiento del ratón)

En este artículo, voy a discutir de eventos múltiples manejo es decir, el lado de manipulación dos eventos por lado usando JavaScript .

múltiple manejo de eventos es el ingrediente secreto de páginas web dinámicas visto hoy en día.

Ahora, vamos a empezar …

Ejemplo Código

<html lang="en">
<head>
<meta charset="utf-8">
<title>Pirates Booty</title>
<script>
window.onload = init;
function init() {
var map = document.getElementById("map");
map.onmousemove=showCoords;
}
function showCoords(eventObj) {
var map = document.getElementById("coords");
x=eventObj.clientX;
y=eventObj.clientY;
map.innerHTML = "Map coordinates: "
+ x + ", " + y;
}
</script>
</head>
<body>
<img id="map" src="map.jpeg">
<p id="coords">Move mouse to find coordinates...</p>
</body>
</html>

Salida / Resultado

Nested Event Handling in JavaScript (on mouse move event) - 4

Al ejecutar el archivo HTML en el navegador se verá que al mover el del ratón sobre la imagen del mapa, X y coordenadas del cursor y se imprimen debajo de la imagen.

Ahora, vamos a pasar a la parte explicación del código.

como código HTML habitual es auto explicativo.

En la etiqueta script, no hay muchas cosas nuevas si ha pasado por mi artículo anterior. La diferencia es que aquí he utilizado dos controladores de eventos en lugar de uno y un objeto de evento.

EVENTO objeto: Siempre que se produce un evento de un objeto de evento correspondiente a que se genera, que tiene varios detalles en relación con el evento como en class de sobre desplazamiento del ratón su objeto de evento tiene las x y Y coordenadas de la punto en el que se coloca ratón o cursor.

En primer lugar, init función ha sido asignada a onload evento que se produce cuando el navegador ha generado totalmente el DOM de código HTML.

En init función, se puede observar que otro controlador de showcoords ha sido asignado a onmousemoveevent del objeto de mapa que representa el mapa de imagen.

Ahora, la zona de trabajo principal es decir, la función de los showcoords .

Como se puede ver objeto de evento correspondiente a onmousemoveevent ha sido aprobada como un argumento para showcoords manejador.

Y entonces, clientX y clientY son propiedades de ese eventObject que contienen X y Y de coordenadas de cursor, respectivamente.

Estos valores son cada vez más imprimirse a través propiedad innerHTML en elemento de párrafo debajo de la imagen.

he tratado de explicar todos y cada concepto con el máximo detalle.

Sigue practicando hasta que mi próximo artículo.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *