Challenges
Event

1. Handling a Click Event to Change Text Content

  • In JavaScript, you can add event listeners to elements to respond to various events like mouse clicks, keyboard input, etc.
  • The addEventListener method is used to attach an event handler to an HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Event Example</title>
</head>
<body>
    <button id="myButton">Click me</button>
    <p id="myText">Original Text</p>
 
    <script>
        const button = document.getElementById('myButton');
        const text = document.getElementById('myText');
 
        button.addEventListener('click', () => {
            text.textContent = 'Text Changed!';
        });
    </script>
</body>
</html>

When the button is clicked, the text content of the paragraph is changed.

References

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener (opens in a new tab)

2. Mouse Hover Event to Change Background Color

  • The mouseover and mouseout events can be used to change the background color of an element when the mouse is hovered over it.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Hover Example</title>
</head>
<body>
    <div id="hoverDiv" style="width: 200px; height: 100px; background-color: lightgrey;">
        Hover over me!
    </div>
 
    <script>
        const div = document.getElementById('hoverDiv');
 
        div.addEventListener('mouseover', () => {
            div.style.backgroundColor = 'lightblue';
        });
 
        div.addEventListener('mouseout', () => {
            div.style.backgroundColor = 'lightgrey';
        });
    </script>
</body>
</html>

When the mouse pointer enters the element, the background color changes to light blue, and when it leaves, it reverts to light grey.

References

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent (opens in a new tab)

3. Form Submission Event to Prevent Default Behavior

  • The submit event can be used to intercept form submissions, and you can prevent the default behavior using event.preventDefault().
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" placeholder="Enter text" required />
        <button type="submit">Submit</button>
    </form>
 
    <script>
        const form = document.getElementById('myForm');
 
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            alert('Form submission intercepted!');
        });
    </script>
</body>
</html>

The form submission is prevented, and an alert is displayed instead.

References

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault (opens in a new tab)

4. Keyboard Event to Detect Key Presses

  • The keydown and keyup events can be used to detect when a key is pressed or released.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyboard Event Example</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="Type something..." />
 
    <script>
        const inputField = document.getElementById('inputField');
 
        inputField.addEventListener('keydown', (event) => {
            console.log('Key pressed:', event.key);
        });
    </script>
</body>
</html>

When you type in the input field, the key pressed is logged to the console.

References

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent (opens in a new tab)

5. Event Delegation to Handle Events on Multiple Elements

  • Event delegation is a technique of using a single event listener to manage events for multiple child elements.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation Example</title>
</head>
<body>
    <ul id="itemList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
 
    <script>
        const itemList = document.getElementById('itemList');
 
        itemList.addEventListener('click', (event) => {
            if (event.target && event.target.nodeName === 'LI') {
                console.log('Clicked item:', event.target.textContent);
            }
        });
    </script>
</body>
</html>

Clicking on any list item triggers the event listener, logging the item's text.

References

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation (opens in a new tab)

6. Double Click Event to Toggle Element Visibility

  • The dblclick event is used to handle double-click actions.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Click Event Example</title>
</head>
<body>
    <p id="toggleText">Double-click to hide/show this text.</p>
 
    <script>
        const text = document.getElementById('toggleText');
 
        text.addEventListener('dblclick', () => {
            text.style.display = text.style.display === 'none' ? 'block' : 'none';
        });
    </script>
</body>
</html>

Double-clicking the paragraph toggles its visibility.

References

https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event (opens in a new tab)

7. Triggering a Custom Event

  • You can create and trigger custom events using the CustomEvent constructor.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Event Example</title>
</head>
<body>
    <button id="triggerButton">Trigger Custom Event</button>
 
    <script>
        const button = document.getElementById('triggerButton');
 
        button.addEventListener('myCustomEvent', (event) => {
            console.log('Custom event triggered:', event.detail);
        });
 
        button.addEventListener('click', () => {
            const customEvent = new CustomEvent('myCustomEvent', { detail: 'Some custom data' });
            button.dispatchEvent(customEvent);
        });
    </script>
</body>
</html>

Clicking the button triggers a custom event, and the custom data is logged.

References

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent (opens in a new tab)

8. Debouncing an Input Event to Improve Performance

  • Debouncing limits the rate at which a function is executed.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debouncing Example</title>
</head>
<body>
    <input type="text" id="debounceInput" placeholder="Type something..." />
 
    <script>
        const input = document.getElementById('debounceInput');
 
        let debounceTimeout;
        input.addEventListener('input', () => {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                console.log('Debounced input:', input.value);
            }, 300);
        });
    </script>
</body>
</html>

The function is only executed after the user stops typing for 300 milliseconds.

References

9. Using the once Option in Event Listener

The once option lets an event listener execute only once, after which it automatically removes itself.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Once Event Listener Example</title>
</head>
<body>
    <button id="oneClickButton">Click me only once</button>
 
    <script>
        const button = document.getElementById('oneClickButton');
 
        button.addEventListener('click', () => {
            alert('Button clicked once!');
        }, { once: true });
    </script>
</body>
</html>

References

10. Handling focus and blur Events for Input Validation

The focus and blur events are helpful for form validation, showing messages when an input gains or loses focus.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus and Blur Example</title>
</head>
<body>
    <input type="text" id="username" placeholder="Enter username" />
    <p id="message" style="display: none; color: red;">Username is required!</p>
 
    <script>
        const input = document.getElementById('username');
        const message = document.getElementById('message');
 
        input.addEventListener('focus', () => {
            message.style.display = 'none';
        });
 
        input.addEventListener('blur', () => {
            if (!input.value) {
                message.style.display = 'block';
            }
        });
    </script>
</body>
</html>

References

11. Preventing Event Propagation

Sometimes, you might want to prevent an event from propagating to parent elements using stopPropagation.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stop Propagation Example</title>
</head>
<body>
    <div id="outer" style="padding: 20px; background-color: lightcoral;">
        Outer Div
        <div id="inner" style="padding: 20px; background-color: lightblue;">
            Inner Div
        </div>
    </div>
 
    <script>
        const outer = document.getElementById('outer');
        const inner = document.getElementById('inner');
 
        outer.addEventListener('click', () => {
            alert('Outer div clicked');
        });
 
        inner.addEventListener('click', (event) => {
            alert('Inner div clicked');
            event.stopPropagation();  // Prevents the outer div click from triggering
        });
    </script>
</body>
</html>

References

DOMBasic JS questions