Please enable JavaScript.
Coggle requires JavaScript to display documents.
Manejo de eventos - Coggle Diagram
Manejo de eventos
Llamada a una función desde el mismo código JavaScript (4)
ejemplo anterior el código quedará así:
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;
.Si lo ponemos antes, cuando JavaScript llama al elemento, éste no está todavía cargado, por lo que no lo encuentra, y da el error de que no existe.
Para que el script funcione debemos ponerlo después del elemento que produce el evento, es decir en el body en cualquier sitio después del elemento al que le aplicamos la propiedad del evento (en este caso es el párrafo que se llama texto).
Llamada a una función desde el mismo código JavaScript (1)
cuando apartemos el ratón las funciones necesarias serán las siguientes:
function italica() { document.getElementById("texto").style.fontStyle = "italic"; }
function normal() { document.getElementById("texto").style.fontStyle = "normal"; }
, queremos que al pasar el ratón por encima de un texto, éste cambie su letra a itálica. aplicaremos para ello los eventos onmouseover para ponerlo en itálica al pasar por él el ratón, y onmouseout para que vuelva a su estado normal
Hasta ahora el código javascript es el mismo que cuando llamamos a la función desde el código HTML (atributo que empieza por "on"), pero aquí no vamos a llamar a la función desde su atributo, sino que incluiremos esa llamada en el código javascript
Llamada a una función desde el mismo código JavaScript (3)
En el ejemplo anterior podría ser el siguiente:
<p id="texto">Pasa el ratón por este texto y cambiará a itálica.</p>
Y 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;
La etiqueta HTML que llama al evento no tiene ahora ningún atributo de evento, sólo necesitamos ponerle el atributo id para identificarlo y poder llamarlo.
Llamada a una función desde el mismo código JavaScript (2)
la forma de llamarlo es:
document.getElementByld(¨texto¨).onmouseover=italica
primero al párrafo donde debe ir el evento, dicho párrafo se llama texto
document.getElementById("texto) y después añadimos el evento como una propiedad del mismo .onmouseover ; luego le asignamos como valor el nombre de la función = italica .