Events and Event Handling in JavaScript

Zia

2 Followers

Aug 18, 2024

1 sec read

363

Consider a scenario where you want to design an employee registration Web form. This form allows 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, an event is generated. Submission of the form refers to the action performed at the click of a button.

An event occurs when a user interacts with a Web page. Some of the commonly generated events are mouse clicks, keystrokes, and so on. The process of handling these events is known as event handling.

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 an event is triggered.

When an event occurs, the 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 the mouse cursor, the element on which an event occurred, and the state of the keys on a keyboard.

Event Bubbling

Event bubbling is a 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 in a paragraph when the user clicks on 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 to all the italic text within the paragraph. This helps in reducing development time and effort since it minimizes the code.

The Life Cycle of an Event

An event's life starts when the user acts to interact with the Web page. It finally ends when the event handler responds to the user's action.

The steps involved in the life cycle of an event are as follows:

The user acts to raise an event.
The event object is updated to determine the event state.
The event is fired.
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

Keyboard events are events that occur when a key or a combination of keys are pressed or released from a keyboard. These events occur for all keys on 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.

How to create JavaScript code that defines event handlers?

function numericonly(event) {

if (!(event.keyCode >= 48 && event.keyCode <= 57)) {

event.returnValue = false;

}

function countWords() {

var message = document.getElementById('txtMessage').value;

message = message.replace(/\s+/g, ' ').trim();

var numberOfWords = message.split(' ').length;

document.getElementById('txtTrack').value = "Words Remaining: " + (50 - numberOfWords);

if (numberOfWords > 50) {

alert("Too many words");

}

In the code, the function numericOnly() declares an event handler function, numericOnly() - The event.keyCode checks if the Unicode character of the entered key is greater than 48 and less than 57. This checks that only numerical values are entered It also declares an event handler function, countWords(). It retrieves the text specified in the txtmessage control. The split () function splits the specified string when a space is encountered and returns the length after splitting. It also calculates and displays the number of remaining words to complete the count of 50 words. If the number of words is greater than 50, an alert box is displayed

Mouse Events

Mouse events occur when the user clicks the mouse button.

onmousedown: Occurs when the mouse button is pressed
onmouseup: Occurs when the mouse button is released
onclick: Occurs when the mouse button is pressed and released
ondblclick: Occurs when the mouse button is double-clicked
Onmousemove: Occurs when the mouse pointer is moved from one location to another
Onmouseover: Occurs when the mouse pointer is moved over the element
onmouseout: Occurs when the mouse pointer is moved out of the element

The use of different mouse events.

In the code, an image is displayed when the Submit button is clicked. It will also display the submit.jpg image when the mouse is released from the Submitbu It also submits the form data when the Submitbutton is clicked. Further, it displays the image when the Reset button is clicked and it displays the reset.jpg image when the released Reset button is. It will reset the form data when the Reset button is clicked.

The loading of images from a JavaScript file.

function showImage (object, url)

{

object.src=url;

}

Focus and Selection Events

Focus events determine the activation of various elements that use the input element. It allows you to set or reset focus on different input elements. Selection events occur when an element or a part of an element within a Web page is selected.

Lists the focus and selection of events.

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

JavaScript JavaScript Events Event Handling Javascript Event Listener types of events in JavaScript events in javascript types of event handlers in javascript Event Bubbling Life cycle of an event Keyboard events Mouse events

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.