Getting Started With Event? Understand In Brief


In this article, I am going to cover a very interesting top Event with Focus and Blur Event. So In javascript, we have almost 200 events. Let me describe the event in very simple words. The event is just action performed by the user. There is almost 200 type of events are there in the JavaScript. we will not take all of them but we will just learn a few important events.

Using event you can perform a different type of operation on HTML elements. One of the most important events is clicked event. click event mostly uses to click a button or to perform any form submission or any validation. You can also create a different type of animation using events. Now we will first take a look at click event. 

The Click event simulate a mouse click on an element. The Click event is fired when your mouse pointer Is pressed and released On a single element.

For example,

DOM.html

In this example, we had created an onclick event using the HTML attribute. Now you know that you can execute JavaScript statement using onclick event. so now you can call any function using onclick attribute right.

like this,

Main.js

Now I will just get remove this javascript statement in the HTML file and put display() function.

DOM.html

So till now, we have seen click event using HTML markup. Now we will understand how to create a click event using JavaScript without any HTML attribute. To add an event using JavaScript you need to call add event listener method.  using this method you can call any JavaScript event.

now let’s consider the following example. so I will first remove this onclick attribute from the button and specify class btn.

DOM.html

Main.js

So when you execute this you will get using add event listener method text on the document. Using the addEventListener() method you can specify an event to the HTML element.

 

Focus and Blur

The Focus event is fired when HTML element has received focus and the blur event is fired when the element lost his focus. We will also understand how to use target property using the event parameter. so using the following example you will completely understand how to use focus and blur event.

In the following example, we will create two input text boxes.

DOM.html

Main.js

In this example, using addEventListener() method we call focus method. In the handler function, we pass the event parameter. Using event parameter we call target property. Target property returns the current fire element and using this we will call style property and specify the background color to the element.

A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

But when you click on the textbox the background color will change but not back to the default color. Now using Blur event we will do that. In this situation, you need to create another event listener to remove this background color and specify default style this the element. 

So here you can use your blur event. As I said previously blur event is fire when the element lost focus. So when the element lost focus we will specify the default background color to the element

like this,

So now when you execute this. Your textbox background color will change automatically when you lost focus from the element. These two events are very important when you wanted to validate your input text box using JavaScript.

In the previous video, we had learned How to create a new Node using JavaScript. You can read this article form this link.

So now you know the concept behind the Event Model. That is all for this article, we will take you back again in the next article.