Embed Size (px)
DESCRIPTION
Descripcion de algunos de los Eventos HTML
Citation preview
HTML DOM EVENTS
Montero García Pattzy Rosario
MOUSE EVENTSEventos del raton
ONCLICK
Se activa cuando el dispositivo apuntador hace clic sobre un elemento. Un clic se define como un MouseDown y MouseUp sobre la ubicación misma pantalla. La secuencia de estos eventos es:1. mousedown2. mouseup3. clic
1
Bubbles Cancelable
SI SI
Devuelve si o no un evento es un evento de
propagación
Devuelve si , si o no un evento puede impedirse
tener su acción por omisión.
<elemento onclick=“código_java_script">
elemento El atributo onclick se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <BDO>, MedlinePlus, <head>, <html>, <iframe>, <meta>, <param>, <script>, < style> y <title>.
código_java_script
Obligatorio. Especifica un código JavaScript que se ejecutará cuando se produzca el evento.
object.onclick=function(){código_java_script};
SintaxisHTML
JavaScript
EJE
MPLO
<html>
<head>
</head>
<body bgcolor="black">
<font color="white">
<h1> <b id='e1'>Instituto </b>
<b id='e2'>Tecnológico</b> <b id='e3'>de</b><b id='e4'> Oaxaca</b></h3>
</font>
<button type="button" onclick="document.getElementById('e1').style.color='orange';
document.getElementById('e2').style.color='#FFCC00';
document.getElementById('e3').style.color='#FFDB4D';
document.getElementById('e4').style.color='#FFFF00';
“>Cambiar color
</button>
</body>
</html>
ONMOUSEOVER
Se activa cuando el dispositivo de puntero se mueve sobre un elemento
2
Bubbles Cancelable
SI Si
<elemento onmouseover=“código_java_script">
object. onmouseover =function(){código_java_script};
SintaxisHTML
JavaScript
Nota: El atributo onmouseover se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <BDO>, MedlinePlus, <head>, <html>, <iframe>, <meta>, <param>, <script>, < style> y <title>.
EJE
MPLO
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#eeff00;width:120px;height:20px;padding:40px;">Aqui</div>
<script>
function mOver(obj)
{
obj.innerHTML="Evento Originado"
}
function mOut(obj)
{
obj.innerHTML="Aqui"
}
</script>
</body>
</html>
ONMOUSEDOWN
Se activa cuando el botón del dispositivo señalador se pulsa sobre un elemento
3
Bubbles Cancelable
SI Si
<elemento onmousedown=“código_java_script">
object.onmousedown=function(){código_java_script};
SintaxisHTML
JavaScript
ORDEN DE ACONTECIMIENTOS RELACIONADOS CON EL EVENTO botón izquierdo del ratón / centro:
onmousedown onmouseup onclick
botón derecho del ratón: onmousedown onmouseup OnContextMenu
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(elmnt,clr)
{
elmnt.style.color=clr;
}
</script>
</head>
<body>
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,‘pink')">
Cambiar color al texto al posicionar puntero
</p>
</body>
</html>
ONMOUSEOUT
Se activa cuando el dispositivo de puntero se mueve fuera de un elemento
4
Bubbles Cancelable
SI SI
<elemento onmouseout=“código_java_script">
object.onmouseout =function(){código_java_script};
SintaxisHTML
JavaScript
Nota: El atributo onmouseout se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <BDO>, MedlinePlus, <head>, <html>, <iframe>, <meta>, <param>, <script>, < style> y <title>.
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="138px";
x.style.width="672px";
}
function normalImg(x)
{
x.style.height="69px";
x.style.width="336px";
}
</script>
</head>
<body><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://w3schools.com/images/w3schoolslogoNEW310113.gif" alt="Smiley" ><p>El bigImg function () se activa cuando el usuario mueve el puntero del ratón sobre la imagen.</p><p>El normalImg function () se activa cuando el puntero del ratón se mueve fuera de la imagen.</p></body></html>
ONMOUSEUP
El evento onmouseup se produce cuando el usuario suelta el botón del ratón sobre un elemento.
5
Bubbles Cancelable
SI SI
<elemento onmouseup=“código_java_script">
object.onmouseup =function(){código_java_script};
SintaxisHTML
JavaScript
Nota: El atributo onmouseup se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <BDO>, MedlinePlus, <head>, <html>, <iframe>, <meta>, <param>, <script>, < style> y <title>.
ORDEN DE ACONTECIMIENTOS RELACIONADOS CON EL EVENTO botón izquierdo del ratón / centro:
onmousedown onmouseup onclick
botón derecho del ratón: onmousedown onmouseup OnContextMenu
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
document.getElementById('myimage').src="http://www.w3schools.com/dhtml/bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="http://www.w3schools.com/dhtml/bulboff.gif";
}
</script>
</head>
<body><img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="http://www.w3schools.com/dhtml/bulboff.gif" width="100" height="180" /><p>Haga clic y mantenga presionado para encender la luz!</p></body></html>
KEYBOARDEventos del Teclado
ORDEN DE ACONTECIMIENTOS RELACIONADOS CON EL EVENTO onkeydown
onkeypress
onkeyupEste orden de eventos sigue
los eventos de teclado
ONKEYPRESS
Se origina después de KeyDown, cuando una tecla del teclado se presiona.
6
Bubbles Cancelable
SI SI
<elemento onchange=“código_java_script">
object.onchange=function(){código_java_script};
SintaxisHTML
JavaScript
ONKEYDOWN
Se origina antes de pulsación de tecla, al pulsar una tecla en el teclado en el momento que se pulsa.
67
<elemento onkeydown=“código_java_script">
object.onkeydown=function(){código_java_script};
SintaxisHTML
JavaScript
Bubbles Cancelable
SI SI
EJE
MPLO
<html>
<head><title> Ejemplo de los eventos onKeyDown, onKeyPress y onKeyUp </title>
<script language=JavaScript>
function DisplayEvent(eventName) {
var myMessage = window.document.form1.textarea2.value;
myMessage = myMessage + eventName;
window.document.form1.textarea2.value = myMessage;
}
</script>
</head>
<body>
<FORM NAME=form1>
<TEXTAREA ROWS=15 COLS=40 NAME=“textarea1 “ onchange="DisplayEvent('onchange\n');"
onkeydown="DisplayEvent('onkeydown\n');" onkeypress="DisplayEvent('onkeypress\n');" onkeyup="DisplayEvent('onkeyup\n\n');"> </TEXTAREA> <TEXTAREA ROWS=15 COLS=40 NAME=textarea2> </TEXTAREA> <BR><BR> <INPUT TYPE="button" VALUE="Limpiar la Ventana de Eventos" NAME=button1 onclick="window.document.form1.textarea2.value=''"></FORM></body></html>
CA
PTU
RA
DE
PAN
TALLA
ONKEYUP
Se activa cuando una tecla del teclado se libera.
68
<elemento onkeyup=“código_java_script">
object.onkeyup =function(){código_java_script};
SintaxisHTML
JavaScript
Bubbles Cancelable
SI SI
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
</script>
</head>
<body><p>El evento onkeyup se produce cuando la tecla del teclado una está en su camino hacia arriba.</p><form>Mensaje<br><input type="text" name="myInput" onkeyup="writeMessage()" size="20"><input type="text" name="mySecondInput" size="20"></form></body></html>
HTML FRAME/OBJECT
ONLOAD
Se activa cuando el agente de usuario (Navegador) termina de cargar todo el contenido de un documento. Para los elementos, este se activa cuando el elemento de destino y todo su contenido ha terminado de cargar
9
Bubbles Cancelable
NO No
SintaxisHTML
JavaScript
<elemento onload=“código_java_script">
window.onload=function(){código_java_script};
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert(“Pagina Cargada");
}
</script>
</head>
<body onload="myFunction()">
<h1>Ejmplo de Carga</h1>
</body>
</html>
ONUNLOAD
El evento onunload se produce una vez que una página se carga o se cierra la ventana.
onunload se produce cuando el usuario se desplaza fuera de la página (haciendo clic en un enlace, la presentación de un formulario, cierre la ventana del navegador, etc)
Nota: también se activará el evento unload cuando un usuario relaods la página (y el onload evento).
10
Bubbles Cancelable
NO No
<elemento onunload=“código_java_script">
window.onunload=function(){código_java_script};
SintaxisHTML
JavaScript
Etiquetas con las que funciona <body>, <frameset>
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert(“Ejemplo de W3Schools!");
}
</script>
</head>
<!--Puede no funcionar en algunos navegadores-->
<body onunload="myFunction()">
<h1>Bienvenidos a mi Página de inicio</h1>
<p>Cerrar esta ventana o presione F5 para recargar la página.</p>
</body>
</html>
HTML FORM
ONCHANGE - CAMBIAR
Se activa cuando un control (ej.; input) pierde la entrada de foco y su valor ha sido modificado desde que obtuvo el enfoque
11
Nota:Para radiobuttons y casillas de verificación, el evento onchange ocurre cuando el estado de activación ha cambiado.
Bubbles Cancelable
SI No
<elemento onchange=“código_java_script">
object.onchange=function(){código_java_script};
SintaxisHTML
JavaScript
EJE
MPLO
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
Palabra:<input type="text" id="fname" onchange="myFunction()">
<p>Al salir del campo de entrada, se activa una función que transforma la entrada de texto en mayúsculas.</p>
</body>
</html>
REFERENCIAS
http://w3schools.com/jsref/dom_obj_event.asp
http://en.wikipedia.org/wiki/DOM_events#HTML_events
http://nereida.deioc.ull.es/~pcgull/hli04/js/node41.html
