La etiqueta HTML <frameset> sólo soporta el evento onload(), que se producirá cuando se haya cargado el contenido de todos los frames que contiene.
Asimismo las etiquetas HTML <frame> e <iframe> soportan sólo dicho evento, que podremos usar para realizar alguna acción cuando se ha cargado cada uno de ellos.
<html>
<head>
<title>informaticapc.com - Curso de JavaScript</title>
<script language="javaScript">
function cargadoIzquierdo() {
alert("Se ha cargado el frame izquierdo");
}
function cargadoDerecho() {
alert("Se ha cargado el frame derecho");
}
function cargados() {
alert("Se han cargado todos los frames");
}
</script>
</head>
<frameset cols="20%,*" onload="cargados();">
<frame id="frmIzquierdo" name="frmIzquierdo" src="pagina2.html" onload="cargadoIzquierdo();" />
<frame id="frmDerecho" name="frmDerecho" src="pagina3.html" onload="cargadoDerecho();" />
<noframes>
<body>Su navegador no soporta frames</body>
</noframes>
</frameset>
</html>
Aquí tienes otro ejemplo, usando <iframe>:
<html>
<head>
<title>informaticapc.com - Curso de JavaScript</title>
<script type="text/javascript">
function cargado() {
alert("Se ha cargado el iframe");
}
</script>
</head>
<body>
<iframe id="iframe1" name="iframe1" src="pagina1.html" onload="cargado();" />
</body>
</html>
Tal y como hemos visto en el punto anterior, podemos detectar el evento que se ha producido en un elemento HTML y escribir el código JavaScript que debe procesarse en tal caso.
También debemos saber que cuando se produce un evento en un elemento HTML, éste se propaga también al resto de los que encuentran anidados sobre él, partiendo de su nodo padre (el elemento dentro del que se encuentra). El evento no se propaga a sus vnodos hijo.
Por ejemplo, si hacemos clic en un checkbox (<input>) que se encuentra en una fila (<tr>) de una tabla (<table>), el evento desde dicho <input> se propagaría también a (<tr>), después a (<table>), y continuaría por el resto del árbol DOM.
A continuación te mostramos un ejemplo en el que podrás ver cómo detener la propagación de un evento:
<html>
<head>
<script>
function clickTabla( event )
{
alert("Click en la tabla");
}
// ------------------------------
function clickFila( event )
{
alert("Click en la fila");
//detenerEvento( event );
}
// ------------------------------
function clickCheckbox( event )
{
alert("Click en el checkbox");
//detenerEvento( event );
}
// ------------------------------
function detenerEvento( event )
{
if( document.all )
{
window.event.cancelBubble = true;
}
else
{
event.stopPropagation();
}
}
</script>
</head>
<body>
<table border="1" onclick="clickTabla(event);">
<tr onclick="clickFila(event);" width="500" bgcolor="#FFFFCC">
<td border="1px" width="200">
<form>
<input onclick="clickCheckbox(event);" type="checkbox" name="check1" />
</form>
</td>
<td border="1px" width="200"></td>
</tr>
</table>
</body>
</html>
Importante: En versiones antiguas de Internet Explorer la forma de acceder al evento en sí se realizaba de forma diferente que en el resto de los navegadores web, debiéndose usar window.event en lugar del Objeto Event().
Observaciones:
- Si hacemos clic en el checkbox se procesaría la función clickCheckbox(), y dado que los eventos se propagan se procesarían también 'clickFila()' y después 'clickTabla()'.
- Si hacemos clic en alguna parte de la fila, se procesará la función clickFila() y después clickTabla().
- Si desmarcamos detenerEvento() dentro de clickCheckbox() y hacemos clic en el checkbox, se procesará la función clickCheckbox() pero no clickFila() ni clickTabla().
- Si desmarcamos detenerEvento() dentro de clickFila() y hacemos clic en el checkbox, se procesarían la funciones clickCheckbox() y clickFila() pero no clickTabla().
