Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 47
Visitas el mes pasado: 103
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
A veces necesitamos obtener información adicional sobre algunos aspectos del evento. Los casos más
normales son obtener la posición del ratón en los eventos de ratón, o la tecla con la que se
actúa en los eventos de teclado. Para ello javascript tiene un objeto especial llamado event
.
Sin embargo los diferentes navegadores tienen distintas formas de obtener este objeto.
Internet explorer considera que forma parte del objeto window, con lo cual se obtiene mediante
el código window.event
El resto de navegadores lo consideran como un argumento implícito que se pasa a la función al ser llamada por un evento, con lo que no tenemos más que darle un nombre al argumento para obtener este objeto:
function manejaEventos(elEvento) { ...
En este caso al llamar a la función desde un evento, el objeto que nos da la información
se llamaría elEvento
Para obtener un código compatible con ambos tipos de navegadores, deberemos escribir el código de la siguiente manera:
function manejaEventos(elEvento) {
var evento = elEvento || window.event;
Donde evento
es el objeto que nos dará la información sobre el evento, tanto en
Internet Explorer como en el resto de navegadores. Podemos cambiar el nombre del argumento, en lugar de
llamarlo elEvento podemos llamarlo de cualquier otra manera, al igual que el nombre del objeto
- aquí lo llamamos evento -, pero lo que no podemos variar es el window.event
, ya que
esta es la forma de obtener el objeto en Internet Explorer.
Una vez que accedemos al objeto event el siguiente
paso es obtener la información a partir de este objeto. Si ponemos varios eventos asociados
a un mismo elemento, mediante el objeto event
podemos distinguirlos para asociarles
diferentes códigos.
La propiedad type
permite distinguir el tipo de evento producido, lo
cual permite distinguir entre los distintos enventos que puede manejar una función.
function manejaEventos(elEvento) {
var evento = elEvento || window.event;
var tipo = evento.type
Aquí la variable tipo
será el nombre del evento sin el prefijo on, es decir si
el evento que hemos pasado a la función es onmouseover
el valor de tipo
será "mouseover"
Vamos a verlo en el siguiente código el cual cambia a colores distintos a un párrafo, según hagamos sobre él un click o un doble click. El código HTML del párrafo es el siguiente:
<p id="colores">pulsa un click para cambiar a color purpura, doble click color oliva</p>
Y el código javascript del ejemplo es el siguiente:
function color(elEvento){ evento = elEvento || window.event; tipo = evento.type; if (tipo == "click") { this.style.color = "purple"; } else if (tipo == "dblclick") { this.style.color = "olive"; } } window.onload = function() { document.getElementById("colores").onclick = color; document.getElementById("colores").ondblclick = color; }
El Resultado del script puedes verlo en el siguiente párrafo:
pulsa un click para cambiar a color purpura, doble click color oliva
La información más utilizada sobre los eventos del ratón es la posición de las coordenadas del puntero en la página.
Una vez que hemos obtenido el objeto event (al cual aquí lo llamaremos por
la variable evento
), podemos acceder a las coordenadas del puntero del ratón
en la pantalla. Según desde dónde tomemos el origen de coordenadas, tenemos tres tipos de
información sobre las coordenadas:
El origen de coordenadas se encuentra en la esquina superior izquierda de la pantalla, aunque la página no ocupe toda la pantalla:
var coordenadaX = evento.screenX;
(Distancia horizontal al borde izquierdo). var coordenadaY = evento.screenY;
(Distancia vertical desde la parte superior). Origen de coordenadas en la esquina superior izquierda de la parte visible de la página. Si hacemos scroll, ya no estará en el origen de la página, sino en el punto más alto y a la izquierda visible de la página.
var coordenadaX = evento.clientX;
(Distancia horizontal al borde izquierdo). var coordenadaY = evento.clientY;
(Distancia vertical desde la parte superior). El origen de coordenadas se encuentra en la esquina superior izquierda la página web; no del navegador, ni de la parte visible de la página, sino de la página como tal.
var coordenadaX = evento.pageX;
(Distancia horizontal al borde izquierdo). var coordenadaY = evento.pageY;
(Distancia vertical desde la parte superior). Esta última opción no es compatible con el navegador Internet Explorer. Para obtener
las coordenadas respecto del origen de la página en Internet Explorer debemos obtener
las coordenadas respecto de la ventana del navegador y sumarle el desplazamiento que
tiene la página respecto de su origen. Esto se obtiene mediante las propiedades
document.documentElement.scrolLeft
y document.documentElement.scrolTop
.
Las coordenadas respecto del origen de la página para Internet Explorer se obtendran de la manera siguiente:
coordenadaX = evento.clientX + document.documentElement.scrollLeft;
coordenadaY = evento.clientY + document.documentElement.scrollTop;
Esta forma de obtener la coordenada respecto a la página es admitida también por el resto de navegadores, por lo que es la que usaremos normalmente.
Podemos obtener la información sobre cual es el botón del ratón que se ha pulsado mediante la propiedad button del objeto event
botonPulsado = evento.button
A cada botón del ratón le corresponde un número, que será el valor devuelto por esta propiedad. El problema está en que los diferentes navegadores asignan diferentes números para los botones del ratón.
En Internet Explorer los valores para los botones del ratón son 1 = botón izquierdo 2 = botón derecho, 3 = botón izquierdo y derecho a la vez y 4 = botón central, mientras que en el resto de navegadores los valores son 0 = botón derecho, 1 = botón central y 2 = botón derecho.
Esta propiedad sólo funciona con los eventos onmousedowun
y
onmouseup
, por lo que otros eventos del ratón ignoran la propiedad,
y no dan un resultado.
El siguiente script permite ver el valor del botón del ratón que se ha pulsado:
function pulsar(ev) { evento = ev || window.event; pulsado = evento.button; texto = document.getElementById("info"); texto.innerHTML = "Valor del último botón del ratón pulsado: " + pulsado } window.onload = function() { document.documentElement.onmousedown = pulsar }
Y en el código html debemos poner un elemento cuyo atributo id tenga por valor "info":
<p id="info"></p>
El siguiente párrafo muestra el resultado del script, al pulsar los diferentes botones del ratón da diferentes valores para cada uno.
Valor del último botón del ratón pulsado : ratón aún no pulsado
En la siguiente página de ejemplo se muestra la información sobre las coordenadas del ratón, y también un elemento que podemos cambiarlo de sitio, al cambiarle sus coordenadas de referencia en CSS. Este es su código, el cual está comentado para ver a qué corresponde cada bloque de sentencias:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Información del ratón</title> <style type="text/css"> body { width: 1500px; } h3 { position: fixed; } #caja { position: absolute; width: 100px; height: 100px; border: 1px solid black; background-color: yellow; top: 70px } #textos { position: fixed; width: 300px; height: 200px; border: 1px solid black; z-index: -1; right: 50px; top:100px; } </style> <script type="text/javascript"> var estado = "parar" // Estado inicial del cuadrado: sin mover function info(elEvento) { var evento = elEvento || window.event; //obtener objeto event var despX = document.documentElement.scrollLeft; //desplazamiento de la pagiina al hacer scroll var despY = document.documentElement.scrollTop; var ventanaX = evento.clientX; //coordenadas de la ventana var ventanaY = evento.clientY; var paginaX = ventanaX + despX; //coordenadas de la página var paginaY = ventanaY + despY; var pantallaX = evento.screenX //coordenadas de la pantalla var pantallaY = evento.screenY caja1 = document.getElementById("caja") //posición del cuadrado posx = paginaX - 50 posy = paginaY - 50 if (estado == "mover"){ //desplazamiento del cuadrado caja1.style.left = posx + "px" caja1.style.top = posy + "px" } texto = document.getElementById("posicion") //escribir coordenadas de la página texto.innerHTML = "Coordenadas de la página: " + paginaX + "px, " + paginaY + "px." texto2 = document.getElementById("ventana") //escribir coordenadas de la ventana texto2.innerHTML = "Coordenadas de la ventana: " + ventanaX + "px, " + ventanaY + "px." texto3 = document.getElementById("pantalla") //escribir coordenadas de la pantalla texto3.innerHTML = "Coordenadas de la pantalla: " + pantallaX + "px, " + pantallaY + "px." texto4 = document.getElementById("accion") //e3scribir estado del cuadrado texto4.innerHTML = "Movimiento del cuadrado: " + estado texto5 = document.getElementById("desplaza") //scroll de la página texto5.innerHTML = "Desplazamiento de la página: " + despX + ", " + despY } function mover(ev){ //control del movimiento del cuadrado var evento2 = ev || window.event //distinguir acción del ratón tipo = evento2.type if (tipo == "click") { //coger el cuadrado (un click) estado = "mover" } else if (tipo == "dblclick") { //soltar el cuadrado (doble click) estado = "parar" } } window.onload = function() { //provocar los eventos document.body.onmousemove = info document.getElementById("caja").onclick = mover; document.getElementById("caja").ondblclick = mover; } </script> </head> <body> <h3>Arrastra este cuadrado: Haz un click encima de él para cogerlo y doble click para soltarlo.</h3> <div id="caja"></div> <br/><br/><br/><br/><br/> <div id="textos"> <p id="posicion">Coordenadas de la página: </p> <p id="ventana">Coordenadas de la ventana: </p> <p id="pantalla">Coordenadas de la pantalla:</p> <p id="accion"> Estado: </p> <p id="desplaza" ></p> </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <p>Parrafo para alargar la página.</p> <br/><br/><br/><br/><br/> <p>Parrafo para alargar la página.</p> <br/><br/><br/><br/><br/> <p>Parrafo para alargar la página.</p> </body> </html>
Puedes ver como queda esta página en el siguiente enlace:
Observa cómo en la primera función obtenemos las coordenadas de la página, y las aplicamos para que se vean en el recuadro, y para poder mover el cuadrado. En la segunda función distinguimos el tipo de evento que se produce, obligándole a activar o desactivar el poder mover el cuadrado.
En la siguiente página veremos cómo obtener información sobre los eventos del teclado.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com