Day 61: HTML Events
Tags: webdev, html, 100daysofcode, frontend
Published: 2023-10-04 15:00:00

## Introduction to HTML Events

HTML events are occurrences recognized by web browsers that can trigger JavaScript functions or other actions. Events can be user-initiated, like clicks and keystrokes, or system-generated, such as the page finishing loading.

### Types of HTML Events 🌈

1. **Mouse Events 🖱️**
   - `click`: Triggered when the mouse is clicked.
   - `mouseover`: Fired when the mouse enters an element.
   - `mouseout`: Fired when the mouse leaves an element.

    ```html
    <button onclick="handleClick()">Click me!</button>
    <script>
      function handleClick() {
        alert('Button clicked!');
      }
    </script>
    ```

2. **Keyboard Events ⌨️**
   - `keydown`: Occurs when a key is pressed.
   - `keyup`: Fired when a key is released.

    ```html
    <input type="text" onkeyup="handleKeyUp(event)">
    <script>
      function handleKeyUp(event) {
        console.log('Key pressed:', event.key);
      }
    </script>
    ```

3. **Form Events 📝**
   - `submit`: Triggered when a form is submitted.
   - `change`: Fired when the value of an input changes.

    ```html
    <form onchange="handleChange()">
      <input type="text" />
    </form>
    <script>
      function handleChange() {
        console.log('Input changed!');
      }
    </script>
    ```

4. **Window Events 🖼️**
   - `load`: Fired when the page finishes loading.
   - `resize`: Triggered when the browser window is resized.

    ```html
    <body onload="handleLoad()" onresize="handleResize()">
    <script>
      function handleLoad() {
        console.log('Page loaded!');
      }

      function handleResize() {
        console.log('Window resized!');
      }
    </script>
    ```

## Event Handling in HTML 🤹‍♂️

Handling events can be done in HTML using inline attributes or in JavaScript using event listeners.

### Inline Event Handling 🎭

```html
<button onclick="handleClick()">Click me!</button>
<script>
  function handleClick() {
    alert('Button clicked!');
  }
</script>
```

### Event Listeners in JavaScript 🧩

```html
<button id="myButton">Click me!</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function () {
    alert('Button clicked!');
  });
</script>
```

## Event Propagation 🌐

Understanding event propagation is crucial. Events can propagate in two phases: capturing phase and bubbling phase.

```html
<div onclick="handleDivClick()">
  <button onclick="handleButtonClick()">Click me!</button>
</div>
<script>
  function handleDivClick() {
    console.log('Div clicked!');
  }

  function handleButtonClick() {
    console.log('Button clicked!');
  }
</script>
```

In the above example, clicking the button triggers both `handleButtonClick` and `handleDivClick` because of event bubbling.

## Bonus Tip

### One Time Listener 

The `{ once: true }` option is a boolean parameter you can add when using `addEventListener`. It's like a golden ticket that ensures your event listener fires only once. After the event is triggered and the handler executed, the listener is automatically removed.

#### Example

Consider a scenario where you want to show a welcome message to users but only the first time they click a button. The `{ once: true }` option makes this a breeze:

```html
<button id="welcomeButton">Click me for a welcome!</button>

<script>
  function showWelcome() {
    alert("Welcome! Thanks for visiting.");
  }

  document.getElementById("welcomeButton").addEventListener("click", showWelcome, { once: true });
</script>
```