El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Eventos del mouse

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Casi todos los elementos que conforman una aplicación web tienen disponibles eventos para poder interactuar. En este capítulo conoce los eventos que existen para interactuar con el mouse y poder así dar tanto una respuesta al usuario como una entrada de información al sistema.
03:34

Transcripción

En JavaScript, es posible interactuar con casi todos los elementos que van a componer una página web o nuestra aplicación, desde HTML, CSS o el mismo JavaScript. Para esto necesitamos agregar elementos de escucha, es decir, agregar un elemento que me permita a mí estar escuchando cuando algo sucede. Uno puede agregar este tipo de elementos ya sea directamente en las etiquetas de HTML o trabajándolas directamente en JavaScript. Mi recomendación es: tráete todo este tipo de interacciones hacia JavaScript. Para esto, lo primero que tenemos que hacer es hacer una asociación entre HTML y JavaScript, esto lo logramos de esta manera. Ahora, si tú te vas al archivo'index. html'de este ejercicio podrás verificar que aquí tenemos una división con una clase llamada'botón'. Este botón es este que podemos ver aquí en pantalla. Si tu te vas a'app. js' podrás ver que estamos haciendo referencia utilizando el método'querySelector' y lo estamos guardando en una constante llamada'botón'. Con esto ya tenemos la asociación entre JavaScript y HTML. Ahora sí podemos interactuar de este lado. Para hacer esto vamos a hacer uso de un método llamado'addEventListener'. 'AddEventListener', como su nombre lo indica en inglés, va a poner una escucha de eventos, es decir, algo que va a estar pendiente de los eventos que van a suceder con este botón que nosotros tenemos asociado. En el primer caso, lo que nosotros queremos escuchar es un clic, entonces estaremos escuchando este evento. Si tú agregaras este evento directamente en HTML tendrías que escribir'onclick', pero cuando lo trabajamos directamente en JavaScript solamente dejamos el nombre del evento, en este caso 'click'. Vamos a probar en nuestro navegador, actualizamos y vamos a dar clic sobre el botón. Al dar un clic vemos que se ejecuta una instrucción que dice: "El botón se ha pulsado". ¿Qué quiere decir? El'addEventListener'escuchó cuando se dio un clic sobre este botón y, por tanto, ejecutó este conjunto de acciones. A partir de aquí, tú puedes invocar más funciones o más acciones dependiendo de lo compleja que tú hayas armado tu aplicación. Pero no solamente podemos hacer este tipo de eventos, también, como nosotros revisábamos, podemos tener acceso a otro evento llamado'mouseover'. Este evento'mouseover'se va a detonar cuando nosotros coloquemos el cursor que estás viendo en pantalla directamente sobre el botón. Así que vamos a actualizar nuestra página y, una vez actualizada, colocamos el cursor del "mouse" sobre el botón. Así puedes ver como tenemos aquí el texto que dice: "El mouse está sobre el botón". Con esto ya pudimos detectar cuando el "mouse" está sobre el botón. Ahora, ¿cómo podemos detectar cuando el "mouse" sale del botón? Para esto vamos a agregar el evento'mouseauto'. Actualizamos el navegador, entramos al botón y, si observas, en la consola dice: "El "mouse" está sobre el botón". Pero si salimos: "El mouse está fuera del botón". Entramos, salimos, entramos, salimos. De esta manera tenemos acceso ya a tres de los principales eventos que existen de JavaScript para poder trabajar con el "mouse". Es importante señalar que estos no son los únicos eventos que existen, hay muchos más eventos, los cuales puedes consultar en la documentación formal y oficial de JavaScript que podrás encontrar ya sea en'w3schools' o en alguno de los fabricantes como, por ejemplo, Mozilla Developer Network.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.