Javascript AddEventListner()

Hello guys, welcome to our JavaScript series. In our last segment, we completed JavaScript events, their type, how they work with basic HTML. Whenever we want to do anything related to events, such as onclick… onmouseover…onmouseout…keyup…keydown…on mouse button click…all these can be done through JavaScript event handler and event. We went through it in the last segment.

I hope you have performed the practicals of what we covered during the last segment.

 Today’s segment is on events in JavaScript with addEventListener. Among the mouse…keyboard…form…and window-related events covered in the last segment, some of them can bind with the addEventListener method. Basically, When we work with events such as on click or on mouse, we write them inside HTML elements. But when we don’t want to write in HTML, but instead bind events through JavaScript, then we use addEventListener. Means without …using ..HTMl part, if we want to write only in javascript, then, how can we do this ? We can do this with the add event listener method.

its written here,

“ Add eventlistener method is used to attach an eventhandler to a particular element.”

 When we want to attach an event with an HTML element, we do it with the help of addEventListener.

clear..good !

Whenever we have an HTML element and along with that HTML event, if we wish to attach any element, Then that is possible with addlistener.

“It does not override the existing event handlers.” This means, if we attach new events to a current HTML element…, an already existing event will not be overridden.

For example, if a division or a button in HTML consists of an onclick event, and another click event is associated with the button through addEventListener in JavaScript,

Then, my priority is given to whom?

Then the onclick event in HTML is prioritized.

What does that mean ?

Any events added through addEventListener method do not override HTML events.

The priority is assigned to HTML events.HTMl events which we have kept such as on click,on mouse ..right ?

“ Events are said to be an essential part. The web page responds according to the event that occurred.”

that means,

The events attached through addEventListener will behave accordingly.

means, if it is click then, it will work on click, if it is hover, then it will work on hover..and accordingly.

moving further,

“Events can be user generated or generated by API’s.”

In the HTML course of LearnVern, we looked at some API-related events, such as web worker, then geology related events , drag and drop events. These are the events that are related to API,

So, what are the events,

Events can be user-generated or events can be API-generated.

“An event listener is a Javascript’s procedure that waits for the occurrence of an event. “

What does that mean ?

(04/16)

Now , What is an EventListener? This method, How does it work? It waits, javascript procedure, it waits for what ? for events to be fired.

If a code contains an event inside the addEventListener method, and it does not occur,

why?

because it waits for its turn.

For example, a click event is associated with a button or a division, it is not fired until it is clicked upon. That means, Every EventListener is in a waiting state. when an event related to it, will occur..

‘’The add event listener method is an inbuilt function of JavaScript.

we can add multiple event handlers to a particular element’’

 We’ll see practically too, how multiple addEventListener can be added on a single element.

So what is the meaning of add event listener ?

In conclusion, addEventListener means to add an event through the addEventListener method in JavaScript and not HTML.

Inside this, the syntax is given.

How does the syntax work ?

Now, What is the syntax here?

Element dot add Event listener.

what will be the element here ?

let’s say,

If I have taken buttons, then button… perhaps, it has been given ID then whatever our ID is …then dot and add event listener. We will select or write in this way,

For Example, if we take a div and give it an ID either A.. B.. C.. D..

We will write it in this manner ,

 document dot get element by id then whatever id is,"A", "B", "C","D" dot addevent dot listener.

Okay !

We shall see three things over here.

First is Event, second is function and third is usecapture.

The usecapture is a very significant thing which we shall study in the latter section of the video.

Firstly, let’s learn about event and function.

So, what is the event ?

Event is the one that is to be fired. Like how it is written over here,

"it is a required parameter. Can be defined as a string that specifies the event's name."

Which means if there is a click over here instead of an event we will write click. If we have a double click, then we will write D B L C L I C K. If you have a mouseover then we will write mouse over.

now, the question will be, in our last segment,

On mouse over…, on mouse out…, on click… on double click..,on resize and, onwindowload... we have used on before everything…Until now, we have used the prefix on HTML elements because it is a handler. We don’t use the prefix ‘on’ with addEventListener because it is simply an event. Here, We would write it like this:-

Addeventlistener("click")

Addeventlistener ("doubleclick")

Addeventlistener(“onmouseover”)

Make sure to not use the prefix "on".

Then comes Function. It is also a required parameter.

We have two required parameters: event and function. For example: if the event is click, or double click, It is mentioned here, “It is a javascript function which responds to the specified event.”

means, if we have written the event ‘click’, so whatever we want to do on click, we will write in function, double click, means, we have written double click, if we want to do something double click then, we will pass it here.

(07/52)

This means that, after onclick, the function name that we used to write in html, exactly same thing we will do here. we don’t pass function and anything in HTML but in javascript. So here, instead of an event , that comes, mouse out , mouse over, double click etc..and inplace of function, respective name of function will be used.

I hope you are following so far.

Then comes, Usecapture.

JavaScript incorporates two concepts.

For example, we have a div and we have taken a span inside the div. There are two methods: event capturing and event bubbling.

the meaning of capturing or event capturing is, we have to come downwards, means, let me tell you, parents will be born first, or child will be born first ?

Capturing works with a parent-child concept where the first event is executed first, whereas bubbling works with an opposite concept, you must have seen water bubbles, bubbles alway move upwards in water, means we have to move upwards from child to parents, In event bubbling concept, we move from last event to first, where the last event is executed first and then other events will be executed.

The difference between capturing and bubbling is, Capturing means to move from parent to child, and bubbling means to move from child to parent, like how a bubble moves from below the water to the surface.We will understand this more easily through examples.

The main use of addEventListener comes here.

While using events in HTML, onclick, onmouse over etc.. we cannot use the concept of bubbling or capturing as there are events simply fired. But we have an advantage with addEventListener, that we can perform either event bubbling or event capturing. 

If you are asked questions regarding this concept in an interview,you can explain the difference between normal events and addeventlistener or explain the uses of it. or if you are asked , how can we use add bubbling event and add capturing event, then only, You can also talk about how Bubbling and capturing are implemented through addEventListener.

UseCapture is an optional parameter, so it is okay if you do not explain that. The programs can be written even without defining them.

Main important things or required parameters are events and functions,

understood or not ? good !

Let’s perform a click event inside addEventListener in a program, then how add event listener happens, like I said, document dot get element by id, whatever id we have given , that means , there, we write add event listener and add function, that we will do with the help of program.

(pause 3 seconds )

Open the sublime text editor. Let’s take a button and fire a click event. (4 seconds pause;typing)

Html( 3 seconds pause ;typing) example (3 seconds pause ; typing) addeventlistener (3 seconds pause ;typing) click (6 seconds pause ;typing)

script save

(6 seconds pause ;typing)

If we want to perform a click,then what do we need?

we can take any example,

Let’s take a button and fire an event on that.

let’s say,

Here I am taking a button and simply adding an ID to it, nothing else. (3 seconds pause ;typing) “click button”- this is my ID.

i can write the name of the button either here or in the value but let's write it here itself …..“Click me!”

OKAY? SAVE.

(7 seconds pause ;typing)

(12/12)

Let’s run the program and we can see the button. The event has not been fired yet. We don’t use onclick as we will use addEventListener.

For that, what will we use ?

(3 seconds pause )

Let’s make a function named “Change background”

document dot …body dot…style dot…background..equal to…yellow

So, I have created a program where The function changes the background colour to yellow when the button is clicked.

Instead of firing the onclick over here we will write,

(3 seconds pause )

 document dot… get element by ID, what is our ID ?.. click button…then, here click button dot…then our main portion,... AddEventListener..

clear !

here, we have written Addeventlistner, you have to be

Be careful with spelling and syntax.

 As we are doing this simply for the click we will write click here in double quotes after comma, the function we have made, and we will pass our function.

Let’s not use the optional parameter useCapture of bubbling and capturing that we will not pass for now.

clear okay !

SAVE, RELOAD. (3 seconds pause )

As you can see, the event is fired upon page reload as the function gets executed. If I reload again, this function is getting fired again,

Why is this happening ? ( 3 seconds pause )

In this line, there is one mistake,

This is happening because of a syntax mistake.

On going back to the slide, here you can see, here after the click we should do a comma and pass just the name of the function and We should not pass parenthesis.

But here we have made a mistake by passing a parenthesis. If we remove the parentheses and save it.

After reloading the page you can see that the yellow color is not directly loaded but works only upon clicking the button.

So, I have reloaded… my program.. click button…yellow color,

What does that indicate ?

(14/54)

This indicates that addEventListener is working properly. So basically, what we did here was to get element by id, then we write .addeventlistener and here we have fired a click and instead of click if we write double click then the event will be fired on double click.

 So, we are done with adding addEventListener upon a button click. I hope you have understood so far. So now, Let’s continue with the slides.

 Currently, we have applied for only one event. Now, we apply to multiple events. Let’s work with the same button. And here in the click button i write addeventlistener. Here you can see if I apply a function of change the background, but with the change background, we will add something else, for example, here, and let's take a p-tag….(typing) In p-tag, I will take an ID, (3 seconds pause ;typing) where we will write line one and add a line …

(3 seconds pause ;typing)

again a ptag for line two and we will get another line.

save the program.

add event listener…(typing)...multiple click…

 We have one click event and one function, and we added two paragraph tags. Currently, when the click event is fired the background changes to yellow. But now I want to add some statements too.

For example, welcome to learnvern or welcome to something else, like that..

In this case, What will we do?

we create two more functions…

In that,

where we will write update line1….you can give whatever name you want to give, and here we will write update line2.

let’s say,

In our first line we will keep the document.get element by id ,as it is

and here in line1 we will write..

document dot getelementbyid, what is the ID of line 1,..line 1… dot inner HTML…. equal to…”welcome to learn vern”

okay !

same thing here,

In line two let's change the sentence and write “

( 4 seconds pause ;typing )

learnvern… is… a great place… to learn… javascript.

Save and we will run the program. (4 seconds pause )

This is our program, you can see, initially nothing has been seen here, we can just see buttons, all other thing is empty,

When I click on the button, the colour changes to yellow. But, the other two events, which we have written, line 1 and line 2, have not been defined yet.

Let’s say if I copy this line two times and here in the click itself I place these two things, one here and one here, in these methods, and then save and reload it.

Now, let’s see, what happens here,

we can see that the text lines are placed along with the color change.

We have applied more than one method upon a single button click.

understood ! now,

We also have onclick. Let’s see if we can implement the same with onclick. (3 seconds pause ;typing )

If I comment this portion…, and here on button click, on onclick, my first function of ‘change background’, after typing semicolon,( 3 seconds pause ;typing) update line 1 function. If I fire both of things, and save it..Now, let’s see what it does !

If I pass two functions with semicolons inside onclick and save, both functions work. So, If you want to capture and fire two methods within a single statement, you can either pass them in onclick with semicolons, or this way, use addEventListener.

I hope you got this.. okay

(19/37)

I suggest you a better way for on click to apply more than one method is addEvent listener, then you should go with addEventListener. Because passing multiple functions in onclick may work on sublime but If you are using frameworks such as angular or any other, so, on this point, It may possibly create issues. understood ?

It is not a good coding practice to apply more than one method inside onclick. Therefore, we won’t follow this approach and instead follow document dot get element by ID addEventListener approach, this one… so that we can work with multiple functions and fire the same event, if click then click and if double click the double click, on a single element.

This was about fire more than one click events. That’s all for today’s segment. We will be continuing with the same topic in the next segment.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Till then keep practising, good bye.

(edited Script)