JavaScript

JavaScript Lesson 35: Events in DOM

In the previous knowledge bit, we have studied about that how we can manipulate style, classes, text, and attributes and learned about different manipulation method like getAttribute(), setAttribute(), add(), toggle(), and remove() method. Now in this knowledge bit, we are going to learn about events in DOM conceptually and we will learn the process of set them up and the syntax of events in DOM.

Introduction to Events in DOM

Events in DOM are basically actions or occurrence, or events could be signal of something that happened. Events give more control to JavaScript on Web pages and make it powerful. So events allow us to find out when certain activities take place and then run own code. By using DOM events, you can create the interactive slideshow, by responding when the user click button, you can create the game, you can process the form and validate input. So events are everywhere from clicking a button, hovering over link, drag, and drop, to change the input.

How do events work?

So the way that these events work is that we actually attach them to specific elements. If we want to use events then we need to attach that event to HTML elements like first button, first H1 or some kind of input textbox. Just like before when we were talking about selecting element and manipulating the element, this events works exactly same. In events, we need to select something and then add the event listener to that selected element to make manipulation.

Syntax

Throughout this lesson, we are going to use the addEventListner method, so this is what we use once we select an element like the first button or the input type password, any other HTML element. Once we have something selected then we call event listener on it. Here is the syntax for event listener:

element.addEventListener(type, functionToCall);

The first part is a part of the event that we want to listen for and the second argument is the code that we want to run when that event happens.

Example

Let’s take an example, let create a webpage with the single button and some text, we use the event to change the paragraph text. So here is our Simple HTML page which consists of 1 <h1>, one paragraph and one button.

<body>
<h1>DOM EVENTS</h1>
<p>Someone Click this Button</p>
<button>Click Me</button>
</body>       

This is how our webpage looks like:

Events in DOM Example

 

We want to change the paragraph text when someone clicks on the button. This is how we can do that.

 

var button = document.querySelector("button");
var paragraph = document.querySelector("p");
button.addEventListener("click", function() {
paragraph.textContent =" YEAAHHH!";
});       

 

Here I am selecting the first button on a page, it does not matter where the button is or how it looks like and then I called button.addEventListener. You can notice that we have passed two arguments in the addEventListener method the first one is “click” and the second argument is the function. So this function code will not run immediately but it only runs when the event fires. So once you click on the button, then the JavaScript callback that function and execute the function code. In our case, it will change the text of paragraph from “Someone Click this Button” to “YEAAHHH!”. Here is the output below:

 

Events in DOM Syntax example

 

You can notice in this screenshot that the paragraph text got changed.

Example

Here is another example, let suppose we want to change the background color to red of heading <h1> element when someone clicks on heading. Here is the demonstration of code below:

var heading = document.querySelector("h1");
heading.addEventListener("click",function(){
heading.style.background = "red";
});       

Here is the graphical illustration of above code below:

Events in DOM click event

So when we run the code then no element on our page got changed but when I click on heading h1 then the red background of heading appeared.

Events in DOM addEventListener

Conclusion:

So in this knowledge bit, we have given an introduction to Events in DOM like what events are and how events can be used. Then we have discussed the syntax of eventListener and we have learned that how we can use events in Web applications.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular

To Top