JavaScript Event object and its properties

When an event occurs, the browser creates an event object and passes it to the event handler, providing information about the event. Here are some important properties of the event object:

1. type: The type of event that was triggered (e.g., "click", "keydown", "load").
2. target: The element that triggered the event (i.e., the element that the event listener is attached to).
3. currentTarget: The element that the event listener is currently being executed on (which may be different from target if the event is bubbling).
4. bubbles: A boolean value indicating whether the event bubbles up through the DOM (true) or not (false).
5. cancelable: A boolean value that indicates whether the event can be canceled (e.g., preventing the default action from happening).
6. defaultPrevented: A boolean indicating whether preventDefault() was called on the event.
7. eventPhase: Indicates which phase of event propagation is currently being executed (capturing, target, or bubbling).
8. timeStamp: A timestamp (in milliseconds) of when the event was created.
9. key (for keyboard events): The value of the key pressed, such as "a", "Enter", or "Escape".
10. clientX / clientY: The horizontal and vertical coordinates of the mouse event relative to the browser window’s client area (not including scroll offset).
11. screenX / screenY: The horizontal and vertical coordinates of the mouse event relative to the entire screen.
12. altKey, shiftKey, ctrlKey, metaKey: Booleans that indicate whether the corresponding modifier keys (Alt, Shift, Control, or Meta) were pressed during the event.
13. button (for mouse events): The button that was pressed on the mouse (e.g., left, middle, or right).
14. keyCode / charCode (for older keyboard events): Numeric code representing the key pressed. keyCode is more common in older browsers, and charCode is used for characters.

These properties allow developers to get detailed information about the event and handle it appropriately in the event handler.

Related Next Post: Difference between target and currentTarget