A2oz

How Do You Register an Event Handler in HTML?

Published in HTML 2 mins read

You can register an event handler in HTML using the on attribute. This attribute is added directly to the HTML element where you want to handle the event.

Here's how it works:

  • on attribute: This attribute specifies the type of event you want to handle. For example, onclick for a mouse click, onmouseover for mouse hovering, onload for page loading, and more.
  • Event handler: This is a JavaScript function that will be executed when the specified event occurs.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Event Handler Example</title>
</head>
<body>

  <button onclick="alert('Button clicked!');">Click Me</button>

</body>
</html>

In this example, the onclick attribute is attached to the <button> element. When the button is clicked, the JavaScript code alert('Button clicked!'); will be executed, displaying an alert message.

Practical Insights:

  • Inline JavaScript: While this method is simple, it is generally considered bad practice to embed JavaScript directly within HTML.
  • External JavaScript: It's recommended to separate your JavaScript code into external files for better organization and maintainability. You can then reference these files in your HTML using the <script> tag.
  • Event Listeners: In modern JavaScript, it's more common to use event listeners instead of the on attribute. Event listeners provide more flexibility and control over event handling.

Solutions:

  • Using external JavaScript:

      <!DOCTYPE html>
  <html>
  <head>
    <title>Event Handler Example</title>
    <script src="script.js"></script>
  </head>
  <body>

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

  </body>
  </html>
      // script.js
  const myButton = document.getElementById('myButton');

  myButton.addEventListener('click', () => {
    alert('Button clicked!');
  });

  • Using inline JavaScript with an anonymous function:

      <!DOCTYPE html>
  <html>
  <head>
    <title>Event Handler Example</title>
  </head>
  <body>

    <button onclick="function() { alert('Button clicked!'); }">Click Me</button>

  </body>
  </html>

Related Articles