JS Best Practices

JS References

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.