Javascript Click Events

JavaScript Click Events

Hello guys! Welcome to our series on JavaScript. In the last segment we covered the method ‘Add Eventlistener’ and how you can add an event through JavaScript without the use of ‘html’. That is the use of Add Event Listener. 

Today’s segment will cover the Onclick Events in JavaScript. means , We’ll talk about the different ways in which you can add more than one Onclick event. Let’s look at what an Onclick event is. Whenever you apply a click event on a Form, <div> or Button, apply the click event then, click event handler fires up and redirects you to whatever event has been written to correspond with the click.

What is the use of Onclick events ? What is the need of it ?

When you look at the purpose of an Onclick event, It is written here,

“ It can be used for validating a form, warning messages and many more.”

 On websites especially, it can be used to validate the form or show warning messages, or any other purpose we use the onclick event. Basically it is a very useful tool in web applications as many tasks are performed through clicks.

Here we have some tags, on that we can not use on click event such as html…head…titles… events… script…base….iframe..and so on. These are tags that element cannot be used for an Onclick event. But except these tags, all the tags react to the On click event. An event can be applied on all HTML elements except the mentioned ones. So, if you apply an Onclick event on an html tag, it will not work. If you apply it on a head tag, it will not work. Likewise, if you look at the title tag, which is the tool tip, it shows up when you hover over an element. Naturally, if the output is dependent on another element, the click event cannot be fired up.

style is a tag that is not visible in the body. Hence, all the tags mentioned above are not visible at the front view. They are coding tags that are understood by the browser. An Onclick event cannot be applied on them, if applied it will show an error as well. On that we can not apply onclick event, Except them, you can write an Onclick event on any other tag. 

I hope you are clear up till now,

(03/03)

Here, we have three ways of writing an Onclick event.

Firstly you have HTML where you put the tag name, your onclick and the name on the function. Secondly, in JavaScript, ‘object dot onclick’, means where you take an object and simply apply onclick on it. For example, document.. dot.. getElementById, the element you get from the Id will be your object.

We will consider that element an object.

So, object dot onclick element, we can write same thing here,... equal to function.

 Thirdly, that we have learnt in the last segment, you have the addEventListener() method.Let’s look at them one by one starting with the first one.

Let’s begin with the onclick attribute. I’ll open Sublime Text..(3 seconds pause ;typing ) In the sublime text, ( 3 seconds pause ;typing) and set this HTML to here. Write the following commands.

Example…. onclick html …

Inside the script we will write, we need an element, so i will write; button namely,... Click me… (3 seconds pause ;typing) here is my onclick… and this is my onclick method.

Here; I will define method , (3 seconds pause ; typing )...we write function

Our function name…(3 seconds pause )

Let’s say, we usually use that only,

 Document dot…body dot…style dot…background, you can make an alert to it…equal to… yellow.

(05/00)

We’ll save this program now.

It is a very easy one named click underscore html. Now we’ll run it. So, here we have our program.

Here we have defined a click event on an html element using Onclick. The color changes the moment I click the button. So, the output here is, the button’s event which has been fired up. That was easy but what we need to understand is the way we have written the onclick within the element and defined the Onclick function in the script of our JavaScript.

Clear guys ! Okay !

Next is how we can do the same thing, which we have done in HTML with JavaScript. By adding onclick and writing the function after equal to. Now, in the same program, from its earlier position.

Example onclick… javascript,

let’s remove the onclick portion and in function, what will I write ?

 Now I’ll give the button an id, let’s say, ID, named onclick or I can give an ID ‘myButton’. (4 seconds pause ;typing )

Here, we will write,

Document dot… Get element dot … ID my button dot onclick.

Make sure the ‘c’ in the unclick command is in lowercase. Equate the function to this and remove the previous onclick attached to the function. This is how it will be defined now. So, what is our function ? In function, If I want to change the color, I’ll do it this way.

So, simply you have the button then the dot… onclick, equal to the function that you want to execute. Here, save this, ( 3 seconds pause ; typing ).

This is our program and if you click on the button, it generates the same outcome and like the html method, the color changes.

But where did we apply the click event ?

(07/34)

Here, we apply the click event with the help of the Id. You take the context of your element and apply the click event on it. This was done with JavaScript. 

If we come back to our slide, after the JavaScript now we look at assEventListener. We have already covered this method in the last segment so let’s take a look at a quick program. ( 3 seconds pause ;typing)

Example… onclick… addeventlistener

Okay

Here, in this portion, the following change will be made. Where you had previously written the onclick…. and the function, the function will become ‘change background’ (3 seconds pause ;typing) and here, the addEventListener (3 seconds pause ;typing) here, my event, that is the “click” , my function’s name will be here…and after comma if i want to use capturing or bubbling, then that …

Here I don’t need it so I will not be adding that. Save the program.

So, this is my program.

You have your button, “click me” then the change in color.

(08/49)

So you can see, here we have performed a single task using three different methods.

What are they ?

First program we have done with HTML, if we look back here, in the code,

we have fired the click event purely using html. 

Secondly, we used the dot onclick in JavaScript which we had not covered in the last segment. This is the key point in today’s lesson where we saw how we take the context of the element and the onclick with the function to fire any click event we want using JavaScript.

Thirdly, the addEventListener from the previous segment. 

So, today we have seen a single click event performed in three ways.

How events can be fired in three different ways ..

First with HTML, then with JavaScript and lastly again with JavaScript using the addEventListener.

Guys this was our segment today where we have learnt how to fire the same click event in different ways. I request you to practise and check the three programs we have covered in the lesson today.

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.

In the next segment we will look at double click events, similar to the single click events covered today. Thank you.

 Edited script