Events in HTML

Página 14

Events in HTML

Events in HTML are actions or occurrences that happen on a page element, such as a mouse click, key press, or page load. These events can be handled with JavaScript to perform specific actions.

Types of events

There are several types of events in HTML, including:

• Mouse events: like click, double click, mouse movement, etc.
• Keyboard events: like pressing a key, releasing a key, etc.
• Form events: how to submit a form, change a form field, etc.
• Loading events: like loading a page, loading an image, etc.

Handling events with JavaScript

To handle events in HTML, you must use JavaScript. JavaScript allows you to define functions that will be executed when a specific event occurs on a page element.

For example, to run a function when a button is clicked, you could use the following code:

  
    <button onclick="myFunction()">Click here</button>

    <script>
      function myFunction() {
        alert("The button was clicked!");
      }
    </script>
  

In this example, the function "myFunction()" will be executed when the button is clicked. The function displays an alert with the message "The button was clicked!".

Adding events with JavaScript

It is also possible to add events with JavaScript. This allows you to define functions to be executed when a specific event occurs on a page element, without having to use the "onclick" attribute.

To add an event with JavaScript, you can use the "addEventListener()" method. For example, to run a function when a button is clicked, you could use the following code:

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

    <script>
      document.getElementById("myButton").addEventListener("click", myFunction);

      function myFunction() {
        alert("The button was clicked!");
      }
    </script>
  

In this example, the "addEventListener()" method is used to add a click event to the button with the ID "myButton". The "myFunction()" function is defined as the function to be executed when the click event occurs.

Conclusion

Events in HTML are an important part of creating interactive and dynamic web pages. With JavaScript, it is possible to handle events to perform specific actions when a user interacts with a web page.

Next page of the Free Ebook:

15Form validation with JavaScript