HTML Event Attributes


HTML event attributes allow you to define JavaScript code to be executed in response to specific user actions or browser events directly within HTML elements. These attributes are embedded within HTML tags and trigger JavaScript functions or expressions when the associated event occurs.

Common HTML Event Attributes

Here’s a list of some common HTML event attributes and their usage:

  1. onclick

    • Triggered when an element is clicked.
    • Example:
      <button onclick="alert('Button clicked!')">Click Me</button>
  2. onmouseover

    • Triggered when the mouse pointer hovers over an element.
    • Example:
      <div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>
  3. onmouseout

    • Triggered when the mouse pointer leaves an element.
    • Example:
      <div onmouseout="this.style.backgroundColor='white'">Move out of me</div>
  4. onchange

    • Triggered when the value of an input element changes (e.g., a text field or dropdown).
    • Example:
      <input type="text" onchange="console.log('Value changed!')">
  5. onfocus

    • Triggered when an element gains focus (e.g., when a user clicks into an input field).
    • Example:
      <input type="text" onfocus="this.style.backgroundColor='lightblue'">
  6. onblur

    • Triggered when an element loses focus.
    • Example:
      <input type="text" onblur="this.style.backgroundColor='white'">
  7. onsubmit

    • Triggered when a form is submitted.
    • Example:
      <form onsubmit="alert('Form submitted!'); return false;"> <input type="text" name="name"> <input type="submit" value="Submit"> </form>
  8. onload

    • Triggered when an element (such as an image) finishes loading.
    • Example:
      <img src="example.jpg" onload="console.log('Image loaded!')">
  9. onunload

    • Triggered when a user leaves the page or navigates away.
    • Example:
      <script> window.onunload = function() { alert('You are leaving the page!'); }; </script>
  10. onkeydown

    • Triggered when a key is pressed down.
    • Example:
      <input type="text" onkeydown="console.log('Key pressed!')">
  11. onkeyup

    • Triggered when a key is released.
    • Example:
      <input type="text" onkeyup="console.log('Key released!')">
  12. onkeypress

    • Triggered when a key is pressed and released (deprecated in favor of onkeydown and onkeyup).
    • Example:
      <input type="text" onkeypress="console.log('Key pressed and released!')">

Practical Example

Here’s an example combining several event attributes to show how they work together:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Attributes Example</title> <style> .highlight { background-color: yellow; } </style> </head> <body> <button onclick="alert('Button clicked!')">Click Me</button> <div onmouseover="this.classList.add('highlight')" onmouseout="this.classList.remove('highlight')" > Hover over me </div> <form onsubmit="alert('Form submitted!'); return false;"> <input type="text" onchange="console.log('Value changed!')" placeholder="Type something"> <input type="submit" value="Submit"> </form> </body> </html>