All "event" properties in Javascript ?

// Common Event Properties
event.type;               // Type of the event (e.g., "click", "keydown").
event.target;             // Element that triggered the event.
event.currentTarget;      // Element to which the event handler is attached.
event.bubbles;            // Boolean indicating if the event bubbles up through the DOM.
event.cancelable;         // Boolean indicating if the event can be canceled.
event.defaultPrevented;   // Boolean indicating if preventDefault() was called.
event.eventPhase;         // Current phase of event propagation (1 = capturing, 2 = at target, 3 = bubbling).
event.isTrusted;          // Boolean indicating if the event was generated by a user action or script.
event.timeStamp;          // Time when the event was created.

// Common Event Methods
event.preventDefault();            // Prevents the default action associated with the event.
event.stopPropagation();           // Stops the event from propagating further.
event.stopImmediatePropagation();  // Stops the event from propagating and prevents other listeners of the same event from being called.

// Mouse Event Properties
event.clientX;          // Horizontal coordinate within the application's client area.
event.clientY;          // Vertical coordinate within the application's client area.
event.screenX;          // Horizontal coordinate relative to the screen.
event.screenY;          // Vertical coordinate relative to the screen.
event.pageX;            // Horizontal coordinate relative to the whole document.
event.pageY;            // Vertical coordinate relative to the whole document.
event.altKey;           // Boolean indicating if the "Alt" key was pressed.
event.ctrlKey;          // Boolean indicating if the "Control" key was pressed.
event.shiftKey;         // Boolean indicating if the "Shift" key was pressed.
event.metaKey;          // Boolean indicating if the "Meta" key was pressed.
event.button;           // Which mouse button was pressed (0 = left, 1 = middle, 2 = right).
event.buttons;          // Which mouse buttons were pressed (bit field).

// Keyboard Event Properties
event.key;              // Value of the key pressed.
event.code;             // Physical key on the keyboard (e.g., "KeyA", "ArrowUp").
event.location;         // Location of the key on the keyboard (0 = standard, 1 = left, 2 = right, 3 = numpad).
event.repeat;           // Boolean indicating if the key is being held down such that it is automatically repeating.

// Touch Event Properties
event.touches;          // List of all current touch points.
event.targetTouches;    // List of touch points currently touching the target element.
event.changedTouches;   // List of touch points that have changed since the last event.

// Focus Event Properties
event.relatedTarget;    // Secondary target for the event (e.g., the element losing focus during a focus event).

// Clipboard Event Properties
event.clipboardData;    // Provides access to the data on the clipboard.

// Drag Event Properties
event.dataTransfer;     // Contains the drag data.

// Examples of Using Event Properties
// Prevent Default Behavior
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();  // Prevents form from submitting.
});

// Get Mouse Position
document.addEventListener('click', function(event) {
    console.log(`Mouse position: (${event.clientX}, ${event.clientY})`);  // Logs mouse coordinates.
});

// Handle Keyboard Input
document.addEventListener('keydown', function(event) {
    console.log(`Key pressed: ${event.key}`);  // Logs the key that was pressed.
});

Comments

Popular posts from this blog

JavaScript Typing Animation

AXIOS REACT JS