Mastering HTML Event Attributes

Introduction

HTML Event Attributes are used to add functionality to HTML elements. When a certain event occurs, such as a user clicking on a button or submitting a form, JavaScript code can be executed. In this lab, you will learn how to use HTML Event Attributes to add interactivity to your web pages.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") subgraph Lab Skills html/basic_elems -.-> lab-70754{{"`HTML Event Attributes`"}} html/head_elems -.-> lab-70754{{"`HTML Event Attributes`"}} html/para_br -.-> lab-70754{{"`HTML Event Attributes`"}} html/doc_flow -.-> lab-70754{{"`HTML Event Attributes`"}} html/forms -.-> lab-70754{{"`HTML Event Attributes`"}} html/form_valid -.-> lab-70754{{"`HTML Event Attributes`"}} end

Creating an HTML Document

Create a new file named index.html and add the basic HTML structure.

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

Adding a Button

Add a button element to the body of your HTML document. Give it some text to display, and an id attribute so we can reference it in our JavaScript code.

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

Adding an Event Attribute

Add an onclick attribute to the button element. In this attribute, we will specify the JavaScript code that should be executed when the button is clicked.

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

Adding More Functionality

Add a div element to the body of your HTML document. This element will be used to display text when the button is clicked.

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

Next, add JavaScript code to update the text of the div element when the button is clicked.

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

Handling Form Submission

Add an HTML form to the body of your HTML document. Also, add an onsubmit attribute to the form to specify the JavaScript code that should be executed when the form is submitted.

<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>

Using Event Listeners

Instead of using event attributes directly in our HTML, we can also use JavaScript to attach event listeners to our HTML elements.

First, remove the onclick and onsubmit attributes from your HTML elements.

<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>

Next, create a JavaScript function that will be called when the button is clicked. This function should update the text of the div element.

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

Finally, attach an event listener to the button using JavaScript.

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

Removing Event Listeners

We can also remove event listeners using JavaScript.

Add a new button to your HTML document. This button will remove the click event listener from the first button.

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

Next, create a new JavaScript function that will remove the click event listener from the first button.

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

Finally, attach an event listener to the new button that will call the removeClickListener() function when clicked.

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

Summary

In this lab, you learned how to use HTML Event Attributes to add interactivity to your web pages. You also learned how to use JavaScript to attach and remove event listeners from HTML elements. With these tools, you can create dynamic web pages that respond to user input.

HTML Event Attributes