Event Handlers

A user event is when the user does something in a Web page, such as clicking something or passing the mouse over something.
An event handler is basically a "listener" put into place to wait for the event to occur, then to react to it.

The most basic form of an even handler is a special HTML attribute as shown below. 
 onclick="custom_function()"
An event handler attribute always starts with "on" to denote that action should be taken when the event occurs.
The value of the event handler is JavaScript code that is executed when the event happens.
So, in the above code, when the click event happens, the custom_function() is called to provide a reaction to the user event.

The event handler is where the transfer occurs: from HTML (the page element that registers the event) to JavaScript (a function to react to the event).
So you can now see why JavaScript functions are so important for handling events. Code in a JavaScript function doesn't get executed until the function is called. So the function basically just sits there doing nothing, potentially for minutes or hours, until the event handler calls the function to provide reaction to the event.

There are some HTML elements below that are set to react to events.
You will have to examine the source code to get a better feel for how it works.

Click me for custom onclick event handler

Go To Cubs Page

I am a clickable div block. After clicking, relaod page to get original page color back.


Common Universal Event Handlers - can applied to ANY HTML element
Use any of these exactly like onclick. They simply react to different user events. 
    onclick       (single click)
    ondblclick    (double click)
    oncontextmenu (right click)
    onmouseover   (pass pointer over)
    onmouseout    (pass pointer out)