Harshil Chovatiya - Day 26: Event Handling and DOM Manipulation

on
Harshil Chovatiya - Day 26: Event Handling and DOM Manipulation

Harshil Chovatiya - Day 26: Event Handling and DOM Manipulation

Harshil Chovatiya - Day 26: Event Handling and DOM Manipulation

Building upon our knowledge of event listeners from Day 25, today, we'll explore event handling and DOM manipulation. These skills are fundamental to creating interactive web pages. We'll cover the following topics with examples:

1. Handling Different Types of Events:

Let's continue with event types. In addition to 'click', 'mouseover', and 'mouseout', there are numerous events like 'keydown', 'keyup', 'submit', and 'change' that you can utilize. We'll use 'keydown' to capture and display key presses:

            
            
<!DOCTYPE html>
<html>
<head>
    <title>Event Handling and DOM Manipulation</title>
</head>
<body>
    <input id="myInput" type="text">
    <p id="output"></p>

    <script>
        const input = document.getElementById('myInput');
        const output = document.getElementById('output');

        // Add a keydown event listener to the input
        input.addEventListener('keydown', function (event) {
            output.textContent = `Key pressed: ${event.key}`;
        });
    </script>
</body>
</html>

2. Modifying the Document Object Model (DOM):

Manipulating the DOM is a crucial part of creating interactive web pages. You can add, modify, or remove elements dynamically. In this example, we'll add a new paragraph when a button is clicked:

            
            
<!DOCTYPE html>
<html>
<head>
    <title>Event Handling and DOM Manipulation</title>
</head>
<body>
    <button id="addButton">Add Paragraph</button>
    <div id="container"></div>

    <script>
        const addButton = document.getElementById('addButton');
        const container = document.getElementById('container');

        // Add a click event listener to the button
        addButton.addEventListener('click', function () {
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'New paragraph added!';
            container.appendChild(newParagraph);
        });
    </script>
</body>
</html>

3. Creating Dynamic Content and Interactive Elements:

You can create interactive elements dynamically. For instance, this example demonstrates how to create a list of items by adding them when a button is clicked:

            
            
<!DOCTYPE html>
<html>
<head>
    <title>Event Handling and DOM Manipulation</title>
</head>
<body>
    <button id="addItem">Add Item</button>
    <ul id="itemList"></ul>

    <script>
        const addItemButton = document.getElementById('addItem');
        const itemList = document.getElementById('itemList');

        // Add a click event listener to the button
        addItemButton.addEventListener('click', function () {
            const newItem = document.createElement('li');
            newItem.textContent = 'New item';
            itemList.appendChild(newItem);
        });
    </script>
</body>
</html>

In this example, clicking the "Add Item" button dynamically adds list items to the unordered list.

Conclusion:

Understanding event handling and DOM manipulation enables you to create rich and interactive web pages where user interactions trigger dynamic responses, making your web applications more engaging and user-friendly.

Social Media

Comments

Post a Comment