Las
funciones controladoras son las que escribimos para reaccionar
a un evento. En el apartado vinculación henmos visto
como se pueden realizar las asignaciones, aquí veremos
en detalle como funcionan. La función controladora es
una función Javascript como cualquier otra, la única
particularidad es que se ejecuta llamada por un evento. Por
ejemplo definamos la función mostrar como una ventana
alert que muestra el atributo id del objeto que la dispara
function mostrar(obj)
{
alert(obj.value);
}
Y ahora realizaremos la vinculación en línea
<input name="miboton" type="button" value="Picar"
onclick = "mostrar(this)">
Al pulsar sobre el boton saltará la ventana de alerta. Pruébalo:
Observa que en la función usamos un argumento y en la vinculación
usamos el parámetro this, cuando pulsamos el botón del ratón
se llama a la función y se identifica su argumento ( obj ) con el parámetro
de la llamada ( this ). Por supuesto que pueden usarse mas de un argumento.
Ojo el nombre de la función va entre comillas dobles, si se usan cadenas
en los argumentos estas se deberán encerrar entre comillas simples como
en el siguiente ejemplo:
function mostrar(obj)
{
alert(obj.value);
}
<
input name="miboton" type="button" value="Picar"
onclick = "mostrar('Pulsastes', this)">
Si deseas detener la promoción de un evento para que no ascienda por
la jerarquía de los elementos de la página deberemos asignar
true a la propiedad cancelBubble del objeto event que se esté controlando.
Por ejemplo en el siguiente código el evento onclick asciende por la
jerarquía desde el elemento div interno al externo pero sólo
queremos el externo.
<div id="Externo" onclick="alert(this.id)">
Esta parte es una capa externa.
<
div id="Interna" onclick="event.cancelBubble=true">
ESTA ES LA CAPA INTERNA</div>
y esto sigue siendo la externa</div>
Si omites la asignación event.cancelBubble en la capa interior, un
click en ella provocaría que también se disparase el evento onclick
de la capa externa. Esta asignación puede hacerse dentro de la función
controladora
|
