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.
- 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">neveropen</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:
