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,
Here, we have three ways of writing an Onclick event.
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.
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.
Clear guys ! Okay !
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 ?
Example… onclick… addeventlistener
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.
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.
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 ..
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.
Share a personalized message with your friends.