alias - What is event loop in JS
The event loop takes care of scheduling part of asynchronous code execution for JS Engines. The event loop exists irrespective of JS engine running on browser or server.
- When a user action occurs on a webpage, the
event trackingthread checks for the associated event handler for the event.
- If event handler is found, the event loop pushes the eventhandler to the JS queue so that the handler gets executed when the stack is free.
- If no event handler is found, then nothing happens.
- the event loop puts the event handler to the queue to execute at the earliest, but the event loop does not interrupt the current running items in the stack.
When an async code is executed, the event loop puts it on the queue. The async code gets executed once the stack is empty.
Keywords: event handling, async, stack, queue, JS thread
event.stopPropogation method. This helps us with which element can handle the event and which one should not be interested in the event.
Certain functionalities or actions are added by default by the browser like
- the last button in the form acting as a submit button
- the anchor tag click taking us to next page after bubling and capture phase
- the tooltip of the image is the alt text
These events cannot be stopped with event.stopPropogation even if they occur after bubbling phase. so we have event.preventDefault. We can stop any default action added by browser. This helps us write better consistent apps.
This is a topic related to accessibility context. We must write events that help people who have trouble using mouse or visually impaired. Here are some techniques.
Use enter key based event along with click event
Use focus and blur events when mouse over, mouse out are used.