Nota: Esta es la forma arcaica mas adelante hablaremos sobre como aceptarlo via lenguaje pero en determinadas ocasiones deberan hacerlo como se ve en este post.
Bienvenidos sean a este post, hoy hablaremos sobre uno de los eventos mas importantes para nuestros objetos como es la intercepcion de la accion del click sobre el mismo, si bien tenemos objetos que son mas «pulsables» que otros en general hoy en dia la gran mayoria accepta este evento, mas alla de la tabla que vimos en el post anterior.
Como hemos visto en este post, lo bueno de interceptar el evento click es la posibilidad de poder asignarle otra accion, por ejemplo nosotros podemos tener un link y este en lugar de redireccionarnos a otra pagina o ancla (anchor) podemos hacer que vaya a una funcion y esta realice otra accion, veamos el siguiente ejemplo:
click.html
<html>
<head>
<title>Prueba de onClick</title>
<script language="Javascript">
<!--
function Pulsado(A)
{
var texto;
switch(A)
{
case "uno":
texto="Pulsaste el boton";
break;
case "dos":
texto="Pulsaste el link";
break;
default:
texto="Pulsaste la imagen";
break;
}
alert(texto);
}
//-->
</script>
</head>
<body>
<h3>Haz click sobre algunos de los siguientes ejemplos</h3>
<button type="button" onclick="Pulsado('uno');">Pulsame</button><br>
Clickea en este <a href="" onclick="Pulsado('dos');return false;">link</a>.
<img onClick="Pulsado()" src="https://tinchicusplays.files.wordpress.com/2019/06/laguna-seca-raceway.jpg" width="640" height="360" border="0">
</body>
</html>Primero hablemos sobre el codigo HTML, en este caso tendremos un boton, un link y una imagen, los tres tienen el evento onClick, los tres invocaran a la funcion Pulsado, la unica diferencia va a estar en el atributo enviado a Pulsado, observen que el primero envia el dato uno, el segundo el dato dos y el ultimo lo envia en blanco, cada uno de ellos condicionara la funcion, pasemos a hablar sobre la funcion.
El codigo javascript va a ser unicamente una funcion llamado Pulsado donde tiene la posibilidad de recibir un dato por medio de la variable A, despues crearemos una variable llamada texto, para luego pasar a un Switch donde evaluaremos el valor de A, si A es igual a uno (el primer case) asignara un mensaje a texto, si A es igual a dos (el segundo case) asignara otro texto y el default asignara otro texto, en el primer texto nos dira que pulsaste el boton porque es el valor enviado desde este objeto, el segundo nos dira que es del link porque enviara ese valor y finalmente la imagen como no envio ningun valor que coinicidiera con los anteriores utilizara el default y por eso nos notifica que pulsaste la imagen, grabenlo y probemos para ver el resultado.
En este caso obtuvimos como con el mismo evento pudimos diferenciar tres acciones de tres elementos distintos, obviamente se puede asignar operaciones mas complejas e inclusive otras funciones pero este es un ejemplo simple para entender su operacion.
En resumen, hoy hemos visto el evento onClick, su utilidad, su funcion, para que se usa, un ejemplo para ponerlo en practica y hemos visto su ductabilidad, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 