HTML DOM Events

HTML DOM EVENTS
MonteroGarcía Pattzy Rosario

MOUSE EVENTS
Eventos 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. mousedown
2. mouseup
3. 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};
Sintaxis
HTML
JavaScript

EJEMPLO
 <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};
Sintaxis
HTML
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>.

EJEMPLO
<!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};
Sintaxis
HTML
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

EJEMPLO
 <!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};
Sintaxis
HTML
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>.

EJEMPLO
<!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/w3scho
olslogoNEW310113.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};
Sintaxis
HTML
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>.

EJEMPLO
<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
document.getElementById('myi
mage').src="http://www.w3scho
ols.com/dhtml/bulbon.gif";
}
function lightoff()
{
document.getElementById('myi
mage').src="http://www.w3scho
ols.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>

ORDEN DE ACONTECIMIENTOS
RELACIONADOS CON EL EVENTO
 onkeydown
 onkeypress
 onkeyup
Este 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};
Sintaxis
HTML
JavaScript

ONKEYDOWN
 Se origina antes de pulsación de tecla, al pulsar una tecla en el
teclado en el momento que se pulsa.
7
<elemento onkeydown=“código_java_script"
>
object.onkeydown=function(){código_java_script};
Sintaxis
HTML
JavaScript
Bubbles Cancelable
SI SI

EJEMPLO
<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('onchangen');"
onkeydown="DisplayEvent('o
nkeydownn');"
onkeypress="DisplayEvent('o
nkeypressn');"
onkeyup="DisplayEvent('onke
yupnn');">
</TEXTAREA>
<TEXTAREA ROWS=15
COLS=40 NAME=textarea2>
</TEXTAREA>
<BR><BR>
<INPUTTYPE="button"
VALUE="Limpiar laVentana de
Eventos"
NAME=button1
onclick="window.document.form
1.textarea2.value=''">
</FORM>
</body>
</html>

ONKEYUP
 Se activa cuando una tecla del teclado se libera.
8
<elemento onkeyup=“código_java_script">
object.onkeyup =function(){código_java_script};
Sintaxis
HTML
JavaScript
Bubbles Cancelable
SI SI

EJEMPLO
<!DOCTYPE html>
<html>
<head>
<script>
function writeMessage()
{
document.forms[0].mySecon
dInput.value=document.form
s[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>

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
Sintaxis
HTML
JavaScript
<elemento onload=“código_java_script">
window.onload=function(){código_java_script};

EJEMPLO
 <!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).
1 0
Bubbles Cancelable
NO No
<elemento onunload=“código_java_script">
window.onunload=function(){código_java_script};
Sintaxis
HTML
JavaScript
Etiquetas con las que funciona <body>, <frameset>

EJEMPLO
 <!DOCTYPE html>
 <html>
 <head>
 <script>
 {
 alert(“Ejemplo deW3Schools!");
 }
 </script>
 </head>
 
 <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>

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};
Sintaxis
HTML
JavaScript

EJEMPLO
 <!DOCTYPE html>
 <html>
 <head>
 <script>
 {
 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

HTML DOM Events

Más contenido relacionado

Similar a HTML DOM Events (20)

Último (20)

HTML DOM Events