Dominando los Atributos de Eventos HTML

Introducción

Los atributos de eventos HTML se utilizan para agregar funcionalidad a los elementos HTML. Cuando ocurre un determinado evento, como cuando un usuario hace clic en un botón o envía un formulario, se puede ejecutar código JavaScript. En este laboratorio, aprenderá a usar los atributos de eventos HTML para agregar interactividad a sus páginas web.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70754{{"Atributos de Eventos HTML"}} html/head_elems -.-> lab-70754{{"Atributos de Eventos HTML"}} html/doc_flow -.-> lab-70754{{"Atributos de Eventos HTML"}} html/embed_media -.-> lab-70754{{"Atributos de Eventos HTML"}} html/forms -.-> lab-70754{{"Atributos de Eventos HTML"}} html/form_valid -.-> lab-70754{{"Atributos de Eventos HTML"}} html/form_access -.-> lab-70754{{"Atributos de Eventos HTML"}} html/inter_elems -.-> lab-70754{{"Atributos de Eventos HTML"}} html/custom_attr -.-> lab-70754{{"Atributos de Eventos HTML"}} end

Creando un documento HTML

Crea un nuevo archivo llamado index.html y agrega la estructura básica de HTML.

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

Agregando un botón

Agrega un elemento button al body de tu documento HTML. Dale algún texto para que se muestre y un atributo id para que podamos referirnos a él en nuestro código JavaScript.

<button id="myButton">Click Here</button>

Agregando un atributo de evento

Agrega un atributo onclick al elemento button. En este atributo, especificaremos el código JavaScript que debe ejecutarse cuando se hace clic en el botón.

<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>

Agregando más funcionalidad

Agrega un elemento div al body de tu documento HTML. Este elemento se utilizará para mostrar texto cuando se haga clic en el botón.

<div id="myDiv"></div>

A continuación, agrega código JavaScript para actualizar el texto del elemento div cuando se haga clic en el botón.

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Click Here
</button>
<div id="myDiv"></div>

Manejo de envío de formularios

Agrega un formulario HTML al body de tu documento HTML. Además, agrega un atributo onsubmit al formulario para especificar el código JavaScript que debe ejecutarse cuando se envía el formulario.

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Usando oyentes de eventos

En lugar de usar atributos de eventos directamente en nuestro HTML, también podemos usar JavaScript para adjuntar oyentes de eventos a nuestros elementos HTML.

Primero, elimina los atributos onclick y onsubmit de tus elementos HTML.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

A continuación, crea una función de JavaScript que se llamará cuando se haga clic en el botón. Esta función debe actualizar el texto del elemento div.

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

Finalmente, adjunta un oyente de eventos al botón usando JavaScript.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

Eliminando oyentes de eventos

También podemos eliminar oyentes de eventos usando JavaScript.

Agrega un nuevo botón a tu documento HTML. Este botón eliminará el oyente de evento de clic del primer botón.

<button id="removeButton">Remove Click Event Listener</button>

A continuación, crea una nueva función de JavaScript que eliminará el oyente de evento de clic del primer botón.

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

Finalmente, adjunta un oyente de evento al nuevo botón que llamará a la función removeClickListener() cuando se haga clic.

<button id="removeButton">Remove Click Event Listener</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

Resumen

En este laboratorio, aprendiste cómo usar Atributos de Eventos HTML para agregar interactividad a tus páginas web. También aprendiste cómo usar JavaScript para adjuntar y quitar oyentes de eventos de elementos HTML. Con estas herramientas, puedes crear páginas web dinámicas que responden a la entrada del usuario.