JavaScript Events Handling

In this JavaScript tutorial, you will learn about handling events in JavaScript, what is event handling in JavaScript? events in JavaScript, events associated with mouse – onmousemove, onclick, ondblclick, onmouseout, onmouseover, events associated with keyboard – onkeydown, onkeyup, onkeypress. onerror, onfocus, onblur, onsubmit, onload and onunload.

What is Event Handling in JavaScript?

This is a very vital concept of JavaScript because without events there would be no code. Event handling is the execution of code for the user’s reaction. In other words, when a user performs some action, the associated event fires or executes. For example, if a programmer want a piece of code to execute when a user presses a button, then the code is placed in the onclick event of the button, executing the code when the user clicks that button. In addition, there are events in JavaScript that are automatically fired without the intervention of the user. The load event fires when the page loads. Thus, there are various scenarios for firing events such as:

• When the user performs some action based on which event fires
• When the page load event fires
• When some fields change, the associated events fire.

Events in JavaScript:

There are numerous events in JavaScript, some of which are listed below. A particular object has numerous events associated with it, depending on the action taken by the user.

For example, the object mouse has numerous events associated with it which depend on the user’s actions.

Events associated with Mouse:

onmousemove:

If the user moves a button, then the events associated with onmousemove fire.

onclick:

onclick events fire when the mouse button clicks.

ondblclick:

The event ondblclick fires when the mouse button is double clicked.

There are also some events associated with the mouse pointer position such as:

onmouseout:

onmouseout event fires if the mouse pointer position is out of focus from the element.

onmouseover:

onmouseover event fires if the mouse pointer position is in focus of the element position.

The above are some of the various mouse events available in JavaScript.

Events associated with Keyboard:

• onkeydown
• onkeyup
• onkeypress

onkeydown:

onkeydown event fires when key is pressed.

onkeyup:

onkeyup event fires when key is released.

onkeypress:

The event onkeypress fires if the onkeydown is followed by onkeyup.

There are many additional events available in JavaScript. A few are listed below:

onerror:

onerror event fires when an error occurs.

onfocus:

When a element gains focus, onfocus event fires or executes.

onblur:

In contrast to an onfocus event, this event fires when the element loses its focus. Both onfocus and onblur may be used for handling validation of forms.

onsubmit:

The event onsubmit fires when the command form submit is given. This event is used for validating all fields in the form before submitting the form.

onload:

onload event automatically executes as soon as the document fully loads. This loads when the user enters the page. This is a commonly used event. This event is used to check compatibility with the browser version and type. Based on this compatibility, the appropriate version of a page will then load.

onunload:

In contrast to onload event, the onunload event fires when the user leaves the page.