1.15 — Exercise Questions: Event Handling in JavaScript

Practice questions for all five subtopics in Section 1.15.

How to use this material (instructions)

1. Read lessons in order — README.md, then 1.15.a → 1.15.e.
2. Answer closed-book first — then compare to the lesson.
3. Build tiny demos — one HTML file, one app.js, log in Console.
4. Interview prep — 1.15-Interview-Questions.md.
5. Quick review — 1.15-Quick-Revision.md.

---

1.15.a — Listeners & bubbling (Q1–Q12)

Q1. Write addEventListener for click on a button #go.

Q2. Why must removeEventListener receive the same function reference?

Q3. What is event bubbling?

Q4. What is the capture phase, and how do you listen in it?

Q5. Difference between event.target and event.currentTarget?

Q6. If you click a <span> inside <button>, and the listener is on <button>, what is target?

Q7. What does event.stopPropagation() do?

Q8. What does event.preventDefault() do?

Q9. What does { once: true } do?

Q10. Can you add two click listeners to the same element?

Q11. Hands-on: Attach listener to document.body; click nested elements — log target.tagName.

Q12. Why are arrow functions sometimes used for listeners (one reason)?

---

1.15.b — Mouse, keyboard, scroll, strict (Q13–Q22)

Q13. Name three mouse events besides click.

Q14. Why prefer event.key over keyCode?

Q15. Difference between keydown and keyup?

Q16. Does keydown repeat while a key is held?

Q17. Why can scroll listeners cause jank?

Q18. What does 'use strict' change about assigning to an undeclared variable?

Q19. Are ES modules strict by default?

Q20. mouseenter vs mouseover — which bubbles?

Q21. Hands-on: Log clientX/clientY on mousemove — observe frequency.

Q22. Name one modifier property on keyboard events.

---

1.15.c — Forms (Q23–Q34)

Q23. Read email from a form #signup using elements.

Q24. Build FormData from form and get field name.

Q25. Why call preventDefault() on submit when using fetch?

Q26. change vs input on a text field?

Q27. What does form.checkValidity() return?

Q28. What does reportValidity() do for the user?

Q29. Why is inline onsubmit="..." discouraged in production?

Q30. What happens if you assign form.onsubmit = fn1 then form.onsubmit = fn2?

Q31. HTML5 required — does it replace all JS validation?

Q32. Exercise: On submit, preventDefault, log FormData entries.

Q33. When is input better than change for live search?

Q34. type="submit" button inside a form — what default action occurs if you do not preventDefault?

---

1.15.d — classList (Q35–Q42)

Q35. Add classes card and featured in one call.

Q36. Toggle open only if you want it on regardless of current state — which toggle form?

Q37. Check if active is present.

Q38. Replace is-loading with is-ready.

Q39. Why use classes instead of setting ten inline styles from JS?

Q40. Exercise: Click toggles nav--open on <nav>.

Q41. Does classList.remove("x") throw if x is missing?

Q42. classList vs className — one disadvantage of assigning className?

---

1.15.e — Window / document events (Q43–Q52)

Q43. DOMContentLoaded — wait for images?

Q44. Which usually fires first: DOMContentLoaded or load?

Q45. resize fires on what object typically?

Q46. Why throttle resize handlers?

Q47. What does { passive: true } promise for scroll?

Q48. window.scrollY — what does it represent?

Q49. Attach scroll to window vs a div with overflow: auto — when would you use each?

Q50. Hands-on: Log order: DOMContentLoaded vs load with timestamps.

Q51. Is scroll a good place for heavy DOM writes every frame?

Q52. Reflection: Weakest subtopic? Two follow-up actions.

---

Answer hints

Q	Hint
Q4	Third arg { capture: true }
Q6	Often SPAN (the actual clicked element)
Q8	Blocks default action, not parent listeners
Q14	keyCode deprecated; key is string
Q26	input every keystroke; change on commit/blur (text)
Q30	Second overwrites first
Q37	classList.contains("active")
Q43	No — DOM ready, not all subresources
Q47	You will not preventDefault in that listener

---

← Back to 1.15 — Event Handling (README)