JavaScript Events & Event Handling

Question 1

What is an event in JavaScript?

Answer 1

An action that occurs in the browser, such as a click, key press, or form submission.

Question 2

What is an event listener?

Answer 2

A function that waits for and responds to specific events on an element.

Question 3

How do you add an event listener to an element?

Answer 3

Use .addEventListener('event', callback). Example: button.addEventListener('click', () => {...});

Question 4

How do you remove an event listener?

Answer 4

Use .removeEventListener('event', callback). Example: button.removeEventListener('click', handleClick);

Question 5

What is the event object?

Answer 5

An object automatically passed to event handlers that contains details about the event.

Question 6

How do you access the element that triggered the event?

Answer 6

Use event.target. Example: console.log(event.target);

Question 7

How do you prevent a form from submitting?

Answer 7

Use event.preventDefault(). Example: form.addEventListener('submit', e => e.preventDefault());

Question 8

How do you stop an event from bubbling up to parent elements?

Answer 8

Use event.stopPropagation();

Question 9

What is event bubbling?

Answer 9

When an event starts on the target element and moves up through its ancestors in the DOM.

Question 10

What is event capturing?

Answer 10

The opposite of bubbling; the event moves from the top element down to the target.

Question 11

What is the default event flow in JavaScript?

Answer 11

Bubbling (from the target element upward).

Question 12

How do you handle a click event on a button?

Answer 12

Use button.addEventListener('click', () => {...});

Question 13

How do you handle keyboard input?

Answer 13

Use document.addEventListener('keydown', e => {...}); or keyup. Example: if(e.key === 'Enter') {...}

Question 14

How do you handle input changes in a text field?

Answer 14

Use input.addEventListener('input', e => {...});

Question 15

How do you handle a form submission?

Answer 15

Use form.addEventListener('submit', e => { e.preventDefault(); ... });

Question 16

How do you listen for when the mouse enters or leaves an element?

Answer 16

Use mouseenter and mouseleave events.

Question 17

How do you detect when a user hovers over an element?

Answer 17

Use the mouseover event.

Question 18

How do you detect when a user scrolls?

Answer 18

Use window.addEventListener('scroll', () => {...});

Question 19

How do you listen for window resizing?

Answer 19

Use window.addEventListener('resize', () => {...});

Question 20

How do you check which key was pressed?

Answer 20

Use event.key inside a keyboard event handler. Example: if (event.key === 'Enter') {...}

Question 21

How do you listen for when the page finishes loading?

Answer 21

Use window.addEventListener('load', () => {...});

Question 22

How do you listen for when the DOM is ready (before full page load)?

Answer 22

Use document.addEventListener('DOMContentLoaded', () => {...});

Question 23

How do you attach one event listener to multiple elements?

Answer 23

Use querySelectorAll() and a loop. Example: buttons.forEach(btn => btn.addEventListener('click', handler));

Question 24

How do you toggle a class when a button is clicked?

Answer 24

Use .classList.toggle('className') inside the click handler.

Question 25

How do you show an alert when a button is clicked?

Answer 25

Use `button.addEventListener('click', () => alert('Button clicked!'));`

Question 26

What is a simple example of event delegation?

Answer 26

Listen on a parent element and use `event.target` to detect which child was clicked.

Question 27

How can you log all user clicks on the page?

Answer 27

Use `document.addEventListener('click', e => console.log(e.target));`

Question 28

What does `event.type` return?

Answer 28

It returns the type of event, such as `'click'`, `'keydown'`, or `'submit'`.

Question 29

Can you attach multiple event listeners to one element?

Answer 29

Yes, an element can have multiple event listeners for the same or different events.

Question 30

How do you trigger an event manually?

Answer 30

Use `.click()` or `dispatchEvent()`. Example: `button.click();`