advertisement
Events and Event Handling in JavaScript
❌
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?
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.
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
advertisement
Conversation
Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!
Join the discussion and share your insights now!
Comments 0