The events

Events are signals that are generated when a specific action takes place. JavaScript is aware of such signals and responds accordingly.

Events are messages fired in a constant stream as the user works along. Events are normally based on user actions, and if programmed well, they act upon as directed. Any event is useless if it doesn't have a handler that works to handle events.

Since JavaScript provides a handsome control to programmers/engineers, it's their ability to handle events, monitor, and respond to them. The more capable you are at handling events, the more interactive your application will be.

The mechanism of event handling

There are two conventional ways to implement events in JavaScript. The first one is via HTML using attributes and second is via script.

To make your application respond to a user's action, you need to do the following:

1. Decide which event should be monitored.
2. Set up event handlers that trigger functions when an event occurs.
3. Write the functions that provide the appropriate responses to the events.

The event handler is always the name of the event perceived by on, for example, click event handled by a event handler, onClick(). This event handler causes a function to run, and the function provides the response to the event.

DOM – event capture and event bubbling

Document Object Model (DOM) makes it much easier to detect the events and assign related event handlers to react to them. This uses two concepts of event capture and event bubbling for this purpose. Let's take a look at how each can help in detecting and assigning the right handler for the right event.

Capturing an event is referred to as the process of an event as it commutes to its destination document. Also, it has the ability to capture or intercept this event.

This makes the whole round trip go incrementally downwards to its containing elements of the tree until it reaches to itself.

On the contrary, event bubbling is the inverse of event capture. With bubbling, the event is first captured and handled by the innermost element and then propagated to the outer elements.

A list of the most common events handlers

There is an entire array of event handlers to be put to use for different needs and situations, but let's add a few more common and regular events handlers.

Note

Please bear in mind that some event handlers may vary from one browser to another, and this specification becomes more limited when it comes to Microsoft's Internet Explorer or Mac's Safari.

The following list is quite handy and self-explanatory. To use this list more effectively, I recommend developers/engineers to make a handy note of it for reference.

As mentioned earlier, these are the most common list of event handlers. There is a separate list of specifications for Microsoft's Internet explorer that can be found at http://msdn.microsoft.com/en-us/library/ie/ms533051(v=vs.85).aspx.

A complete list of the event's compatibility can be seen at:

http://www.quirksmode.org/dom/events/index.html

Triggering functions in response to events

JavaScript events need triggering in order to get a response. An event handler is responsible for responding to such events, but there are four commonly used ways to trigger events in a proper manner:

• The JavaScript pseudo protocol
• The inline event handler
• The handler as an object property
• Event listeners

Types of events in JavaScript

There are many different types of events in JavaScript, some listed as follows:

• Interface events
• Mouse events
• Form events
• W3C events
• Microsoft events
• Mozilla events

Interface events

The interface events occur due to the user's action. When the user clicks on any element, he/she always causes a click event. When clicking on the element has specific purpose, an additional interface event is caused.

Mouse events

When the user moves the mouse into the link area, the mouseover event fires. When he/she clicks on it, the click event fires.

Form events

Forms recognize submit and reset events, which predictably, fire when the user submits or resets a form. The submit event is the key of any form of a validation script.

W3C events

W3C events fire when the DOM structure of a document is changed. The most general one is the DOMSubtreeModified event that is fired when the DOM tree below the HTML element is triggered.

The DOM 2 event specification can be seen at http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-mutationevents.

Microsoft events

Microsoft has created a number of its own event's handler specification, which (of course) can only run on its platform. This can be seen at http://msdn.microsoft.com/en-us/library/ie/ms533051(v=vs.85).aspx.

Mozilla events

Mozilla has its own specification, and it be seen at https://developer.mozilla.org/en/docs/Web/API/Event.