Java-Script Event Handlers and Events

Java-Script Event Handlers and Events

Basically the term is used as JavaScript events but they are not actually JavaScript events they are HTML events and JavaScript act on those events and perform some action by using its event handler.

HTML or Java Script events are something that occur when some event happens like page loading, button click, key up etc.

To handle those events all, the three type of JS can be use either its inline, internal or external. Most used HTML event is onclick event and it occur when user click on some particular element usually button.

Some Common events are:

  • onclick()
  • onload()
  • onchange()
  • onkeyup()
  • onkeydown()
  • oninput()
  • oncontextmenu()
  • onmouseover()
  • onsubmit()
  • onscroll()
  1. onclick()

In the above example an event is bound on the button and the event handler foo() will be called when the button is clicked.

2. onload()

This event reacts on page load. In the above example when this page loads an alert box will show displaying a message “Hello”.

3. onchange()

This event occurs with there is a change in drop down menu, whenever a new item is selected then the alert box is shown.

4. onkeyup()

Using this event we perform some action when a key is up after pressed. Like in example above, an input box and onkeyup event is triggered on that input box. When user tries to enter some value first time, press any key and then release it, this event handler run and show an alert box. onkeydown is almost same as when the key is pressed event handler will be called.

5. oninput()

This is similar as onkeyup and onkeydown events.

6. oncontextmenu()

This event occurs when user right click on the element in div.

7. onmouseover()

This event is similar to CSS hover property this event occurs when the user takes mouse on the element where this event is set to be triggered.

8. onsubmit()

 

This is a form event occurs when a form is submitted. Usually it is used to check and validate form inputs.

9. onscroll()

This event reacts when the user tries to scroll the page up or down.