Please enable JavaScript.
Coggle requires JavaScript to display documents.
Trabajo con eventos, Jonathan Eliezer Martinez Miguel Carlos Diaz Vasquez…
Trabajo con eventos
Llamada a una funcion desde el mismo
código javascript (3)
El código javascript completo para que se produzca el evento, sería el siguiente.
function italica() { document.getElementById("texto").style.fontStyle = "italic"; }
function normal() { document.getElementById("texto").style.fontStyle = "normal"; }
document.getElementById("texto").onmouseover = italica;
document.getElementById("texto").onmouseout = normal;
Para que el script funcione debemos ponerlo después del elemento que produce el
evento, es decir en el body en cualquier sitio
Esto es debido a que la página se va cargando de manera secuencial, en el mismo
orden en que está escrita
función anónima onload
Para poder corregir el error anterior, y poder poner el script delante de la página, debemos
forzar mediante una función
window.onload = function() {
... código javascript que debe ser cargado después de la página ...
}
Esta función también nos sirve para poner el código en el que buscamos un elemento de la
página (por ejemplo mediante document.getElementById("...")) antes del mismo
Si no estamos muy seguros de cual es el elemento que requiere que la página esté cargada para que se ejecute el código, podemos englobar todo el código javascript dentro de esta función
window.onload = function() {
function italica() { document.getElementById("texto").style.fontStyle = "italic"; }
function normal() { document.getElementById("texto").style.fontStyle = "normal"; }
document.getElementById("texto").onmouseover = italica;
document.getElementById("texto").onmouseout = normal;
}
Llamada a una funcion desde el mismo
código javascript (1)
consiste en escribir primero una función que se quiere ejecutar con el evento, y llamarla después desde el propio código javascript
si queremos pasar el raton por encima de un texto, aplicaremos los eventos onmouseover para ponerlo en italica, despues pasaremos raton y onmouseout para que vuelva a su estado normal.
las funciones necesarias serán las siguientes:
function italica() { document.getElementById("texto").style.fontStyle = "italic"; }
function normal() { document.getElementById("texto").style.fontStyle = "normal"; }
Llamada a una funcion desde el mismo
código javascript (2)
La forma de llamarlo es:
document.getElementById("texto").onmouseover = italica
Se accedera primero al párrafo donde debe ir el evento, dicho párrafo se llama texto
document.getElementById("texto)
Sucesivamente añadimos el evento como una propiedad del mismo .onmouseover ; luego le asignamos como valor el nombre de la función = italica
Ahora la etiqueta HTML que llama al evento no tiene ningún atributo de evento, sólo
necesitamos ponerle el atributo id para identificarlo y poder llamarlo.
<p id="texto">Pasa el ratón por este texto y cambiará a itálica.</p>
Jonathan Eliezer Martinez Miguel
Carlos Diaz Vasquez