Javascript Events

JavaScript Events

In JavaScript, events are actions or occurrences that happen in the system, often as a result of user interactions or other triggers. JavaScript can be used to handle these events and provide functionality in response. These events can be triggered by actions like clicking, hovering, submitting forms, or even loading a webpage.

1️⃣ Common Event Types

1.1 Mouse Events

click: Fired when the user clicks on an element.

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

dblclick: Fired when the user double-clicks on an element.

button.addEventListener('dblclick', function() {
  alert('Button double-clicked!');
});

mousedown: Fired when the mouse button is pressed down on an element.

button.addEventListener('mousedown', function() {
  console.log('Mouse down on button');
});

mouseup: Fired when the mouse button is released over an element.

button.addEventListener('mouseup', function() {
  console.log('Mouse up on button');
});

mouseenter: Fired when the mouse pointer enters an element.

button.addEventListener('mouseenter', function() {
  console.log('Mouse entered button');
});

mouseleave: Fired when the mouse pointer leaves an element.

button.addEventListener('mouseleave', function() {
  console.log('Mouse left button');
});

mousemove: Fired when the mouse pointer moves over an element.

button.addEventListener('mousemove', function(event) {
  console.log(`Mouse moved at position (${event.clientX}, ${event.clientY})`);
});

1.2 Keyboard Events

keydown: Fired when a key is pressed down.

document.addEventListener('keydown', function(event) {
  console.log(`Key pressed: ${event.key}`);
});

keyup: Fired when a key is released.

document.addEventListener('keyup', function(event) {
  console.log(`Key released: ${event.key}`);
});

keypress: Fired when a key is pressed and produces a character (Note: deprecated in modern browsers).

document.addEventListener('keypress', function(event) {
  console.log(`Key pressed: ${event.key}`);
});

1.3 Focus Events

focus: Fired when an element gains focus (like an input field).

const input = document.getElementById('myInput');
input.addEventListener('focus', function() {
  console.log('Input field focused');
});

blur: Fired when an element loses focus.

input.addEventListener('blur', function() {
  console.log('Input field lost focus');
});

1.4 Form Events

submit: Fired when a form is submitted.

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevents the form from being submitted
  console.log('Form submitted');
});

change: Fired when the value of an element (like a checkbox or input) changes.

const input = document.getElementById('myInput');
input.addEventListener('change', function() {
  console.log('Input value changed');
});

input: Fired when the user types into an input field.

const input = document.getElementById('myInput');
input.addEventListener('input', function() {
  console.log('User typed something');
});

1.5 Window Events

resize: Fired when the window is resized.

window.addEventListener('resize', function() {
  console.log('Window resized');
});

scroll: Fired when the user scrolls in the browser window.

window.addEventListener('scroll', function() {
  console.log('Page scrolled');
});

load: Fired when the page or an image is fully loaded.

window.addEventListener('load', function() {
  console.log('Page loaded');
});

beforeunload: Fired when the window is about to be unloaded.

window.addEventListener('beforeunload', function(event) {
  event.returnValue = 'Are you sure you want to leave?'; // Display confirmation dialog
});

2️⃣ Event Listeners

To respond to events, JavaScript uses event listeners. Event listeners are methods that are used to "listen" for an event and execute code when that event occurs.

2.1 Adding Event Listeners

You can add an event listener using the addEventListener() method:

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

addEventListener(): Adds an event listener to an element. You pass the event type (like click) and the callback function to execute when the event occurs.
This method allows for multiple event listeners on the same event.

2.2 Removing Event Listeners

You can remove an event listener using the removeEventListener() method:

function onClick() {
  console.log('Button clicked!');
}

const button = document.getElementById('myButton');
button.addEventListener('click', onClick);

// Later, remove the event listener
button.removeEventListener('click', onClick);

removeEventListener(): Removes an event listener. You must pass the exact function reference that was used to add the event listener.

3️⃣ Event Object

When an event occurs, an event object is passed to the event handler function. This object contains useful information about the event, such as the target element and the type of event.

3.1 Accessing the Event Object

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log(event.type); // "click"
  console.log(event.target); // The element that triggered the event
});

3.2 Useful Properties in the Event Object

event.target: The element that triggered the event.
event.type: The type of event (e.g., 'click', 'keydown').
event.preventDefault(): Prevents the default action of the event (like submitting a form).
event.stopPropagation(): Prevents the event from bubbling up to parent elements.
event.clientX & event.clientY: The mouse pointer position relative to the viewport.

4️⃣ Event Bubbling and Capturing

Events in JavaScript follow a two-phase propagation model: bubbling and capturing.

Event Bubbling: The event starts at the target element and bubbles up to the root of the DOM.
Event Capturing: The event starts from the root and propagates down to the target element.

You can control the propagation phase by passing an optional third argument to addEventListener():

element.addEventListener('click', function() {
  alert('Clicked!');
}, true); // true indicates capturing phase

5️⃣ Conclusion

Events are fundamental to making web pages interactive. JavaScript provides robust ways to listen for events, handle them, and even control how events propagate through the DOM. By using event listeners and understanding the event object, you can respond to user actions dynamically and create rich, interactive user experiences.

Let me know if you have any questions or need examples for specific events! 😊

Souy Soeng

Javascript Events