Chapter 7: Events in JavaScript

Events in JS

The change in the state of an object is known as an Event.

Events are fired to notify code of "interesting changes".

Types of Events

• Mouse Events (click, double click etc.)
• Keyboard Events (keypress, keyup, keydown)
• Form Events (submit etc.)
• Print Event & many more

Event Handling in JS

Event handling is used to perform actions when an event occurs.

node.event = () => {
//handle here
}

btn.onclick = () => {
console.log("btn was clicked");
}

Event Object

It is a special object that has details about the event.

All event handlers have access to the Event Object's properties and methods.

node.event = (e) => {
//handle here
}

Common Properties

• e.target
• e.type
• e.clientX
• e.clientY

Event Listeners

Event listeners are used to attach multiple event handlers.

node.addEventListener( event, callback )

node.removeEventListener( event, callback )

Note: callback reference same होना चाहिए remove के लिए

Lets Practice

Qs. Create a toggle button for dark/light mode.