SOLUCIONES ADDEVENTLISTENER

Transcripción

SOLUCIONES ADDEVENTLISTENER
Eventos: click y dblclick
Crearemos una página que muestre dos div y definiremos el evento click para el primero y el evento
dblclick para el segundo. Lanzar un alert en las dos funciones
<html>
<head>
<script type="text/javascript">
addEventListener('load',inicio,false);
function inicio()
{
document.getElementById('recuadro1').addEventListener('click',presion1,false);
document.getElementById('recuadro2').addEventListener('dblclick',presion2,false);
}
function presion1(){ alert('se hizo click');}
function presion2(){ alert('se hizo doble click') }
</script>
</head>
<body>
<div style="width:200px;height:200px;background:#ffff00" id="recuadro1">
Prueba del evento click
</div>
<div style="width:200px;height:200px;background:#ff5500" id="recuadro2">
Prueba del evento dblclick
</div>
</body>
</html>
1
Eventos: click y dblclick
Realizar un programa que muestre en un div el número 2. Cada vez que se hace doble clic sobre el
mismo duplicar el valor contenido en el div.
<html><head>
function inicio(){
document.getElementById('numero').addEventListener('dblclick',duplicar,false); }
function duplicar()
{
var valor=document.getElementById('numero').innerHTML;
valor=parseInt(valor);
var resultado=valor*2;
document.getElementById('numero').innerHTML=resultado;
}
</script></head>
<body>
<div id="numero">2</div>
</body></htm>
Eventos: mousedown y mouseup
Elaborar un programa que muestre un div de color rojo. Cuando se presione cambiar el color a
amarillo y luego de soltar el botón del mouse volver a pintar de rojo.
<html><head>
function inicio() {
document.getElementById('recuadro1').addEventListener('mousedown',presion1,false);
document.getElementById('recuadro1').addEventListener('mouseup',presion2,false);
}
function presion1(){document.getElementById('recuadro1').style.backgroundColor='#ffff00';}
function presion2(){document.getElementById('recuadro1').style.backgroundColor='#ff0000';}
</script></head>
<body>
<div style="width:200px;height:200px;background:#ff0000" id="recuadro1">
</div>
</body></html>
2
Eventos: mouseover y mouseout
Implementaremos un pequeño ejemplo que muestre un cuadrado, el mismo mostrará los bordes
redondeados cuando ingresemos la flecha del mouse en su interior y volverá al estado anterior
cuando retiremos la flecha.
<html><head>
function inicio()
{
document.getElementById('recuadro1').addEventListener('mouseover',entrada,false);
document.getElementById('recuadro1').addEventListener('mouseout',salida,false);
}
function entrada() { document.getElementById('recuadro1').style.borderRadius='30px';}
function salida() { document.getElementById('recuadro1').style.borderRadius='0px';}
</script></head>
<body>
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
</div>
</body></html>
Eventos: mouseover y mouseout
Mostrar un elemento de tipo H1, luego cuando se ingrese con el mouse dentro del mismo cambiar el
color a letra roja y color de fondo amarillo, luego cuando se mueva la flecha del mouse fuera del
elemento volver al color original.
<html><head>
function inicio(){
document.getElementById('titulo').addEventListener('mouseover',entrada,false);
document.getElementById('titulo').addEventListener('mouseout',salida,false);
}
function entrada(){
document.getElementById('titulo').style.color='#ff0000';
document.getElementById('titulo').style.backgroundColor='#ffff00';
}
3
function salida() {
document.getElementById('titulo').style.color='#000000';
document.getElementById('titulo').style.backgroundColor='#ffffff';
}
</script></head>
<body>
<h1 id="titulo">Titulo principal</h1>
</body></html>
Evento: mousemove
Crearemos una página que muestre un div que capture el evento mousemove y como acción
incrementaremos un contador para saber la cantidad de veces que se disparó el evento.
<html>
<head>
function inicio(){
document.getElementById('recuadro1').addEventListener('mousemove',mover,false);
}
function mover()
{
var x=parseInt(document.getElementById('cantidad').innerHTML);
x++;
document.getElementById('cantidad').innerHTML=x;
}
</script>
</head>
<body>
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
</div>
<p id="cantidad">0</p>
</body>
</html>
4
Evento:keyup
Crear un área de texto que ha medida que se escriba en el se muestre un en un cuadro de texto la
cantidad de caracteres disponibles para seguir escribiendo.
<html><head>
function inicio(){ document.getElementById('texto').addEventListener('keyup',presion,false);}
function presion() {
var canti=document.getElementById('texto').value.length;
var disponibles=140-parseInt(canti);
document.getElementById('cantidad').innerHTML=disponibles;
}
</script></head>
<body>
<input type="text" id="texto" maxlength="140" size="140"><br>
<p>Máxima cantidad de caracteres disponibles:<span id="cantidad">140</span></p>
</body></html>
Evento: change
Crear un formulario que muestre un checkbox que cuando se chequee active un botón (el checkbox
debe mostrar un mensaje que diga : "Confirma los términos y condiciones?")
<html><head>
function inicio(){
document.getElementById('checkbox1').addEventListener('change',seleccion,false);
}
function seleccion(){
if (document.getElementById('checkbox1').checked==true)
{
document.getElementById('boton1').disabled=false;
}
else
document.getElementById('boton1').disabled=true;
}
</script>
</head>
5
<body>
<input type="checkbox" id="checkbox1" name="checkbox1">
Confirma los términos y condiciones?<br>
<input type="button" id="boton1" name="boton1" value="confirmar" disabled>
</body></html>
Eventos: focus y blur
Crear un formulario con dos controles de texto . El control que tiene el foco mostralo de color rojo y el
que no está de negro.
<html
<head>
<title>addEventListener</title>
<script type="application/javascript">
function inicio ()
{
document.getElementById('texto1').addEventListener('focus', tomarfoco1, false);
document.getElementById('texto2').addEventListener('focus', tomarfoco2, false);
document.getElementById('texto1').addEventListener('blur', perderfoco1, false);
document.getElementById('texto2').addEventListener('blur', perderfoco2, false);
}
function tomarfoco1(){ document.getElementById('texto1').style.color = "#ff0000";}
function tomarfoco2() { document.getElementById('texto2').style.color = "#ff0000"; }
function perderfoco1() { document.getElementById('texto1').style.color = "#000000"; }
function perderfoco2() { document.getElementById('texto2').style.color = "#000000"; }
</script>
</head>
<body>
<input type="text" id="texto1" name="texto1" size="30">
<br>
<input type="text" id="texto2" name="texto2" size="30">
</body>
</html>
6

SOLUCIONES ADDEVENTLISTENER

Transcripción

Documentos relacionados

{runphp} if (($_SERVER[`REQUEST_URI`]=="/es