Unlock the Interactive Web with JavaScript Event Handling

JavaScript Event Handling

https://basescripts.com/unlock-the-interactive-web-with-javascript-event-handling

Exercise 1: Basic Click Event

Problem: Add an event listener to a button with the id click-me. When clicked, it should alert "Button was clicked!".

Explanation: Demonstrates basic usage of the addEventListener method to handle click events on HTML elements.

Code:

<button id="click-me">Click me</button>

<script>

?document.getElementById('click-me').addEventListener('click', function() {

?alert("Button was clicked!");

?});

</script>

Exercise 2: Mouse Over Event

Problem: Change the text color of a paragraph with the id hover-over-me to red when the mouse hovers over it.

Explanation: Shows how to use the mouseover event to trigger style changes in HTML elements.

Code:

<p id="hover-over-me">Hover over me!</p>

<script>

?document.getElementById('hover-over-me').addEventListener('mouseover', function() {

?this.style .color = 'red';

?});

</script>

Exercise 3: Form Submit Event

Problem: Prevent a form with the id my-form from submitting traditionally and alert "Form Submitted!" when it is submitted.

Explanation: Teaches handling form submission with JavaScript, including preventing the default form submission behavior.

Code:

<form id="my-form">

?<button type="submit">Submit</button>

</form>

<script>

?document.getElementById('my-form').addEventListener('submit', function(event) {

?event.preventDefault(); // Prevent traditional form submission

?alert("Form Submitted!");

?});

</script>

Exercise 4: Key Down Event

Problem: Alert "You pressed a key!" whenever any key is pressed down within the webpage.

Explanation: Introduces handling keyboard events, specifically the keydown event.

Code:

<script>

?document.addEventListener('keydown', function() {

?alert("You pressed a key!");

?});

</script>

Exercise 5: Removing Event Listeners

Problem: Remove the click event listener from the button with the id click-once, which alerts "Clicked!" – ensure the button can only be clicked once.

Explanation: Teaches how to remove event listeners to prevent handling events after an initial interaction.

Code:

<button id="click-once">Click me (once)</button>

<script>

?function handleClick() {

?alert("Clicked!");

?document.getElementById('click-once').removeEventListener('click', handleClick);

?}

?document.getElementById('click-once').addEventListener('click', handleClick);

</script>

Exercise 6: Event Delegation

Problem: Implement event delegation on a list: clicking on any list item should alert the content of that item.

Explanation: Demonstrates event delegation by setting a single event listener on the parent element to handle clicks for all children.

Code:

<ul id="my-list">

?<li>Item 1</li>

?<li>Item 2</li>

?<li>Item 3</li>

</ul>

<script>

?document.getElementById('my-list').addEventListener('click', function(event) {

?if (event.target .tagName === 'LI') {

?alert(event.target .textContent);

?}

?});

</script>

Exercise 7: Toggle Visibility on Click

Problem: Toggle the visibility of a div with the id toggle-div each time a button is clicked.

Explanation: Shows how to change the style of an element to show or hide it when handling click events.

Code:

<button id="toggle-button">Toggle Div</button>

<div id="toggle-div">Toggle my visibility</div>

<script>

?document.getElementById('toggle-button').addEventListener('click', function() {

?let div = document.getElementById('toggle-div');

?div.style .display = div.style .display === 'none' ? 'block' : 'none';

?});

</script>

Exercise 8: Change Background Color

Problem: Change the background color of the body of the page to a random color when a button is clicked.

Explanation: Combines event handling with a function to change styles dynamically.

Code:

<button id="color-button">Change Background Color</button>

<script>

?document.getElementById('color-button').addEventListener('click', function() {

?document.body.style .backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);

?});

</script>

Exercise 9: Mouse Move Event

Problem: Display the current mouse coordinates in a div with the id mouse-coords whenever the mouse is moved over the page.

Explanation: Teaches handling the mouse movement event and updating the DOM in response.

Code:

<div id="mouse-coords">Move your mouse!</div>

<script>

?document.addEventListener('mousemove', function(event) {

?document.getElementById('mouse-coords').textContent = X: ${event.clientX}, Y: ${event.clientY};

?});

</script>

Exercise 10: Load Event

Problem: Alert "Page fully loaded" when the entire webpage, including all dependent resources like images, has fully loaded.

Explanation: Introduces handling the load event which is fired when the whole page has loaded.

Code:

<script>

?window.addEventListener('load', function() {

?alert("Page fully loaded");

?});

</script>