Practice & Assessment
Test your understanding of Events and Event Handling
Multiple Choice Questions
6An anonymous function is passed to addEventListener. Which statement about removing it is true?
A user clicks a <button> inside a <li> inside a <ul>. Which element does e.target refer to in a listener attached to the <ul>?
Which event should you listen to on a <form> to catch both button-click and Enter-key submissions?
What is the primary performance benefit of event delegation?
Which property gives the printed character or key name (e.g. 'Enter', 'a') for a keyboard event?
You attach a listener with { once: true }. What happens after it fires the first time?
Coding Challenges
1Keyboard Shortcut Manager
Build a key logger UI: an empty log div (#key-log) and a clear button (#clear-log). Attach a single keydown listener to the document. Each keypress appends a new <p> to #key-log showing e.key, e.code, and whether Ctrl/Shift/Alt was held (show as badges). Pressing Escape clears the log. Input: keyboard keypresses. Output: timestamped log entries visible in #key-log. Constraint: use event delegation for the clear button. Estimated time: 20-25 minutes.
Mini Project
Interactive Quiz Engine
Build a multi-question quiz app using only DOM and event APIs. Requirements: store 5 questions as a JS array of objects with a question string, four option strings, and a correct index. Render one question at a time. Clicking an option highlights it (correct = green border class, wrong = red border class via classList), locks all options to prevent re-clicking, and shows a Next button. After the last question display a result screen showing score out of 5 with a Restart button that resets the quiz. Use event delegation on the options container, preventDefault where needed, and once listeners on the Next button.