Al momento de delegar algunas funcionalidades a la capa cliente de nuestra aplicación, necesitamos algunas formas más directas de poder ejercer un control sobre nuestro programa, si bien Javascript es un lenguaje bastante poderoso, no solo se queda ahí, también nos ofrece la posibilidad de escuchar e interactuar con lo que realiza el usuario en el documento HTML.
A estos elementos de interacción se les conoce como eventos, los eventos van desde hacer un click en un elemento específico, hasta saber si se refresca la página, si se pasa el apuntador del mouse sobre un elemento, etc. Con ello podemos elaborar otro tipo de rutinas que ayudan a descargar trabajo de nuestra lógica de servidor.
Evento onclick()
Este es quizás uno de los eventos más utilizados y más útiles de los que disponemos en nuestro arsenal de Javascript. El evento onclick() consiste en un método que al aplicarlo sobre un elemento de nuestro árbol DOM nos permite manejar cuando un usuario hace click sobre él, por ejemplo si tenemos un ancla o link pero no queremos que dirija al usuario a otra página si no que haga alguna acción en específico o cuando hacemos un botón que no tiene que enviar un formulario. Son muchas las cosas que nos permite realizar este evento si tenemos un poco de creatividad.
Veamos a continuación un código muy simple para hacer que este evento funcione:
Este código es muy simple, definimos un elemento en nuestro HTML, en este caso un input y le decimos que en su evento onclick va a llamar a la función activarEvento(), luego en un bloque script definimos el código de esta función, para efectos de demostración activamos un mensaje emergente alert() con un texto, veamos como luce en nuestro navegador:
![asp_eventodom.jpg]()
Queda demostrado entonces que es muy simple manejar este tipo de eventos en nuestros programas, sin embargo esta no es la única forma que tenemos de manipular nuestro DOM, podemos realizar el mismo ejemplo de otra forma que es un poco menos rígida, ya que nos permitiría condicionar el evento según lo que necesitemos, veamos el código primero:
En este ejemplo vemos que ya el evento no lo atamos al elemento, si no que en nuestro script le decimos al objeto document que va a escuchar cuando hagan click sobre el elemento al que llamamos por su id, luego si hacen click sobre él debe llamar a una función.
Como pudimos ver, trabajar con eventos en el árbol DOM utilizando Javascript en ASP.NET MVC es algo bastante sencillo, sólo debemos dominar estas bases para poder crear mejores funcionalidades y aplicarlas en nuestras aplicaciones.
A estos elementos de interacción se les conoce como eventos, los eventos van desde hacer un click en un elemento específico, hasta saber si se refresca la página, si se pasa el apuntador del mouse sobre un elemento, etc. Con ello podemos elaborar otro tipo de rutinas que ayudan a descargar trabajo de nuestra lógica de servidor.
Evento onclick()
Este es quizás uno de los eventos más utilizados y más útiles de los que disponemos en nuestro arsenal de Javascript. El evento onclick() consiste en un método que al aplicarlo sobre un elemento de nuestro árbol DOM nos permite manejar cuando un usuario hace click sobre él, por ejemplo si tenemos un ancla o link pero no queremos que dirija al usuario a otra página si no que haga alguna acción en específico o cuando hacemos un botón que no tiene que enviar un formulario. Son muchas las cosas que nos permite realizar este evento si tenemos un poco de creatividad.
Veamos a continuación un código muy simple para hacer que este evento funcione:
<input id="btn-evento" value="Tócame" onclick="activarEvento();">
<script type="text/javascript">
function activarEvento() {
alert("Hola soy un evento javascript en ASP.NET MVC");
}
</script>
Este código es muy simple, definimos un elemento en nuestro HTML, en este caso un input y le decimos que en su evento onclick va a llamar a la función activarEvento(), luego en un bloque script definimos el código de esta función, para efectos de demostración activamos un mensaje emergente alert() con un texto, veamos como luce en nuestro navegador:
Queda demostrado entonces que es muy simple manejar este tipo de eventos en nuestros programas, sin embargo esta no es la única forma que tenemos de manipular nuestro DOM, podemos realizar el mismo ejemplo de otra forma que es un poco menos rígida, ya que nos permitiría condicionar el evento según lo que necesitemos, veamos el código primero:
<input id="btn-evento" value="Tócame">
<script type="text/Javascript">
function activarEvento() {
alert("Hola soy un evento javascript en ASP.NET MVC");
}
document.getElementById("btn-evento").onclick = activarEvento;
</script>
En este ejemplo vemos que ya el evento no lo atamos al elemento, si no que en nuestro script le decimos al objeto document que va a escuchar cuando hagan click sobre el elemento al que llamamos por su id, luego si hacen click sobre él debe llamar a una función.
Importante
Esta forma de trabajar es mucho más limpia que la anterior y nos asegura que podemos reutilizar nuestros elementos, es muy recomendable trabajar siempre en función de que vamos a volver a utilizar lo que hacemos, de esta forma podemos acelerar nuestro proceso de desarrollo de software.
Como pudimos ver, trabajar con eventos en el árbol DOM utilizando Javascript en ASP.NET MVC es algo bastante sencillo, sólo debemos dominar estas bases para poder crear mejores funcionalidades y aplicarlas en nuestras aplicaciones.
