Eventos de JavaScript | Tutorial de Desarrollo Web

Introducción

Bienvenido a la documentación de JavaScript. Esta práctica te dará una introducción a los eventos.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/AdvancedConceptsGroup -.-> javascript/closures("Closures") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/data_types -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} javascript/comp_ops -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} javascript/functions -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} javascript/closures -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} javascript/dom_select -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} javascript/event_handle -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} javascript/bom -.-> lab-106901{{"Introducción a los Eventos de JavaScript"}} end

Eventos

index.html ya se ha proporcionado en la máquina virtual.

La interactividad real en un sitio web requiere controladores de eventos. Estos son estructuras de código que escuchan la actividad en el navegador y ejecutan código en respuesta. El ejemplo más obvio es manejar el evento click, que es activado por el navegador cuando haces clic en algo con el mouse. Para demostrar esto, escribe lo siguiente en la consola, luego haz clic en la página web actual:

document.querySelector("html").addEventListener("click", function () {
  alert("¡Ay! ¡Deja de pincharme!");
});

Hay varias maneras de adjuntar un controlador de eventos a un elemento.
Aquí seleccionamos el elemento <html>. Luego llamamos a su función addEventListener(), pasando el nombre del evento a escuchar ('click') y una función que se ejecutará cuando ocurra el evento.

La función que acabamos de pasar a addEventListener() aquí se llama una función anónima, porque no tiene un nombre. Hay una forma alternativa de escribir funciones anónimas, que llamamos función flecha.
Una función flecha utiliza () => en lugar de function ():

document.querySelector("html").addEventListener("click", () => {
  alert("¡Ay! ¡Deja de pincharme!");
});

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado la práctica de Eventos. Puedes practicar más prácticas en LabEx para mejorar tus habilidades.