How to use DOM and Events ?

Last Updated : 20 Nov, 2024

DOM (Document Object Model), a programming interface that is used to connect web pages to scripts by representing the structure of a document such as HTML documents. It defines the way a document is to be accessed and manipulated and also defines the logical structure of documents.

The way DOM represents a document is with a logic tree ( DOM Tree ).

To provide a dynamic interface to a webpage, we use events in JavaScript . These events are attached to elements in the DOM ( Document Object Model ). By default, events use bubbling propagation i.e from children to parent. Events can be bound either as inline or in the external script (JavaScript file).

Using DOM and Events: Suppose we want to make changes in the document or stylesheet on a certain event. The event can be the loading of a web page, selection of any specific element or a form is submitted, etc.

Some common event attributes are as follows.

Window Event Attributes: These events are triggered for the window object.
- onload: It fires after the page is finished loading.
- onresize: It fires when the browser window is resized.
Mouse Events: These are the most common events with basic interaction of user through the mouse.
- onclick: It fires when a mouse click is triggered on an element.
- onmouseover: It fires when a mouse pointer moves over an element.
- ondblclick: It fires on a mouse double click on the element
KeyBoard Events:
- onkeydown: It fires when the user is pressing a specific key
- onkeyup: It fires when a user releases a specific key

Example 1: In this example, we are attaching an event listener to our container. When the click event happens, the text color inside the container changes from white to black.

HTML

<!DOCTYPE html>
<html>
<head>
<title>DOM and Events</title>
  <style>
    .container {
            height: 150px;
            width: 300px;
            background-color: green;
            text-align: center;
            color: white;
            font-size: 30px;
            margin: auto;
            font-weight: bolder;
            font-family: -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                        'Open Sans', 'Helvetica Neue', sans-serif;
        }
  </style>
</head>
<body>  
    <div class="container">GeeksforGeeks</div>
    <script>
        let container = document.querySelector('.container');
        container.addEventListener('click', function(e) {
            container.style.color = "black";
        });
    </script>  
</body>
</html>

Output:

Example 2: In this example, a keyboard event is taking place, we are attaching an event Listener on our input element. When the user is pressing an 'Enter' key, a message prompt is shown to the user saying "You Pressed an Enter".

HTML

<!DOCTYPE html>
<html>

<head>
    <title>DOM and Events</title>
    <style>
        * {
            font-family: -apple-system, BlinkMacSystemFont,
              'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
              'Open Sans', 'Helvetica Neue', sans-serif;
        }
    </style>
</head>

<body>
    <h3>
        Message will be displayed when 
        you press a Enter key
    </h3>

    <input type="text" class="inputArea">
    <p></p>

    <script>
        let input = document.querySelector(".inputArea");
        let p = document.querySelector("p");
      
        input.addEventListener('keydown', function(e) {
            if (e.keyCode == 13) {
                p.textContent = "You pressed an Enter";
            }
        })
    </script>
</body>

</html>

Output:

HTML | DOM touchmove Event

siddharth01

Improve

Article Tags :

How to use DOM and Events ?

Similar Reads

Thank You!

What kind of Experience do you want to share?