SOLUCION MANEJADORES DE EVENTOS
Crear 3 botones al hacer clic debe aparecer un mensaje de alerta.
Para lograrlo utiliza las 3 técnicas aprendidas para manejar los eventos
o Manejadores como atributos de los elementos XHTML
o Manejadores como funciones JavaScript externas.
o Manejadores "semánticos"
<html >
<head><title>Eventos Manejador semantico</title>
<script type="application/javascript">
window.onload = function()
{
document.getElementById("pinchable").onclick = muestraMensaje;
//document.form1.boton.onclick = muestraMensaje; // FUNCIONA
}
function muestraMensaje()
{
alert('Gracias por pinchar');
}
</script>
</head>
<body>
<!—Manejadores de eventos-->
<FORM name="form1">
<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" /> <br />
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" /> <br />
<input type="button" value="Pinchame y verás" id="pinchable" name="boton"/> <br />
</FORM>
</body>
</html>
<!--Manejadores como atributos de los elementos XHTML.-->
<!--Manejadores como funciones JavaScript externas. -->
<!--Manejadores "semánticos". -->
1
Modifica el siguiente código , utilizando Manejadores como funciones externas y Manejadores
semántico
document.getElementById("contenidos2").onmouseout = function(){resalta(this);}
case 'silver':
elemento.style.borderColor = 'black';
break;
case 'black':
elemento.style.borderColor = 'silver';
break;
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="document.getElementById('contenidos').style.borderColor='black';"
onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
Sección de contenidos...
</div>
<html>
<head><title>Eventos Manejador semantico</title>
<script type="application/javascript">
window.onload = function()
{
document.getElementById("contenidos2").onmouseover = function(){resalta(this);}
}
function resalta(elemento)
{
}
</script>
</head>
<body>
<!—Manejadores de eventos-->
<!— =============== Manejadores de eventos como atributos XHTML =================-->
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="document.getElementById('contenidos').style.borderColor='black';"
onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
Sección de contenidos1...
</div>
switch(elemento.style.borderColor)
{
}
2
<br /><br />
<!— =============== Manejadores de eventos como atributos XHTML : Uso this
=================-->
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Sección de contenidos2...
</div>
<br /><br />
<!— =============== Manejadores de eventos como funciones externas =================-->
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="resalta(this)"
onmouseout="resalta(this)">
Sección de contenidos3...
</div>
<br /><br />
<!— =============== Manejadores de eventos semánticos =================-->
<div id="contenidos2" style="width:150px; height:60px; border:thin solid silver" >
Sección de contenidos4...
</div>
</body>
</html>
3
Crear cuenta
Comentarios de: Solución manejadores de eventos (0)
No hay comentarios