Search within TutorialsPark

Javascript : Events Introduction


An Introduction to Javascript Events


What is Javascript Events?

The Javascript interacts with the documents HTML code using events, which are triggered when a particular moment of interest happens in the document or the browser window.

Javascript Events makes the webpages interactive and responsive.These events are asynchronous (i.e it can occur anytime).Most events are triggered by user action but there are some exceptions like the event load

When an event occurs there are some default action which the browser takes(like clicking on a link open up the location specified in attribute href).An event may be a click, mouseover, keystroke etc.

Javascript responds to events by calling a function which performs some task as defined in the function.

As of today, Javascript has three event models for programming events: the inline model , the Scripting Model and the DOM2 Model

Javascript can respond to the following type of events: Mouse Actions , Keyboard Actions , Form Actions , Page Loads , Time Intervals and Errors


Javascript Events : Inline Event Handling

The most easiest and the simplest way to handle events is by using Inline Events.

To create an Inline Event you need a simple event handler and event attribute

HTML elements define an event attribute for each of the event which can be supported. Eg onclick event attribute is the attribute for global onclick event, which gets triggered when the element is clicked.

In the below demo, when the event is triggered the browser sets the value of the special variable this to the HTMLElement Object reprsenting the element that triggered the event.

Example: Javascript Event Handling using Inline HTML.

Give it a TRY! » Note: The array of Attr objects get indexed by position and name


Javascript Events: HTML Inline Event Handling

In the above example the transition of style is one way, i.e the style doesn't reset when the mouse leaves the target element

The counter event to the mouseover is the event mouseout , the corresponding event attribute is onmouseout .

Inline Event handling method is not ideal as it voilates the principle of seperation of layers, which says that the markup must be kept seperate from the JavaScript.

Example: Javascript DOM : Event Handling using Inline Event

Give it a TRY! » Note: To see the effect hover the mouse over and out of the element


Javascript Events: Event Handling Function

The task of defining function for every event attribute is cumbersome and requires a lot of duplication of code.

This issue can be addressed by using Event Handling Functions, which specifies the function name as the value for the event attribute in the element.

In the below demo, the above example is done using Event handling function which is called when the event occurs.

Example: Javascript Events: Using a Function to handle Events

Give it a TRY! » Note: To see the effect hover the mouse over and out of the element