Consider a scenario where you want to design an Employee registration Web form. This form allows the users to fill in appropriate details and click the submit button. When the user clicks the submit button, the form data is submitted to the server for validation purposes. In this case, when the user clicks the button, and event is generated. The submission of form refers to the action performed on click of the button.
An event occurs when a user interacts with the Web page. Some of the commonly generated events are mouse click, key strokes, and so on. The process of handling these events is known as event handling.
Event handling is a process of specifying actions to be performed when an event occurs. This is done by using an event handler. An event handler is a scripting code or a function that defines the actions to be performed when the event is triggered.
When an event occurs, an event handler function that is associated with the specific event is invoked. The information about this generated event is updated on the event object. The event object is a built-in object, which can be accessed through the window object.
It specifies the event state, which includes information such as the location of mouse cursor, element on which event occurred, and state of the keys in a keyboard.
Event bubbling is mechanism that allows you to specify a common event handler for all child elements. This means that the parent element handles all the events generated by the child elements. For example, consider a Web page that consists of a paragraph and a table. The paragraph consists of multiple occurrences of italic text. Now, you want to change the color of each italic text of a paragraph when the user clicks a particular button. Instead of declaring an event handler for each italic text, you can declare it within the P element. This allows you to apply colors for all italic text within the paragraph. This helps in reducing the development time and efforts since it minimizes the code.
An event's life starts when the user preforms an action to interact with the Web page. It finally ends when the event handler provides a response to the user's action.
Steps involved in the life cycle of an event are as follows:
- The user performs an action to raise an event.
- The event object is updated to determine the event state.
- The event is fired.
- The event bubbling occurs as the event bubbles through the elements of the hierarchy.
- The event handler is invoked that performs the specified actions.
Keyboard events are the events that occur when a key or a combination of keys are pressed or released from a keyboard. These events occur for all keys of a keyboard.
Different keyboard events are as follows:
- Onkeydown
- Occurs when a key is pressed down.
- Onkeyup
- Occurs when the key is released.
- Onkeypress
- Occurs when a key is pressed and released.
Mouse events occur when the user clicks the mouse button.
| Events | Description |
|---|---|
onmousedown |
Occurs when the button is pressed. |
onmouseup |
Occurs when the mouse button is released. |
onclick |
Occurs when the mouse button is pressed and released. |
ondbclick |
Occurs when the mouse button is double-clicked. |
onmousemove |
Occurs when the mouse pointer is moved from one location to other. |
onmouseover |
Occurs when the mouse pointer is moved over the element. |
onmouseout |
Occurs when the mouse pointer is moved out of the element. |
The focus events determine the activation of various elements that uses the input element. It allows you to set or reset focus for different input elements. The selection events occur when an element or a part of an element within a Web page is selected.
| Events | Description |
|---|---|
onfocus |
Occurs when an element receives focus. |
onblur |
Occurs when an element loses focus. |
onselectstart |
Occurs when the selection of an element starts. |
onselect |
Occurs when the present selection changes. |
ondragstart |
Occurs when the selected element is moved. |