JavaScript Events quiz

[ { "q": "Which method is the modern recommended way to attach event handlers in JavaScript?", "opts": ["onclick attribute", "addEventListener()", "onmouseover property", "attachEvent()"], "correct": 1, "exp": "addEventListener() is the modern standard because it allows multiple handlers on the same element and gives full control over event propagation." }, { "q": "What does event.preventDefault() do?", "opts": ["Stops the event from bubbling up", "Removes the event listener", "Stops the browser default action like form reload", "Prevents the function from running"], "correct": 2, "exp": "preventDefault() cancels the default browser behaviour for that event, such as stopping a form from submitting and reloading the page." }, { "q": "Fatima clicks a button inside a div. Both have click listeners. Which fires first?", "opts": ["The div listener", "The button listener", "Both fire at the same time", "Neither fires"], "correct": 1, "exp": "Due to event bubbling, the innermost element fires first. The button fires, then the event bubbles up to the div." }, { "q": "Which event fires on every single keystroke in a text input?", "opts": ["blur", "change", "input", "keyup"], "correct": 2, "exp": "The input event fires immediately on every keystroke, paste, or cut — making it ideal for real-time character counting or validation." }, { "q": "What does event.stopPropagation() do?", "opts": ["Prevents form submission", "Stops the event from bubbling to parent elements", "Removes the event listener", "Stops the default browser action"], "correct": 1, "exp": "stopPropagation() prevents the event from travelling up to parent elements, isolating it to the target element only." }, { "q": "Ahmad writes btn.onclick = fn1 and then btn.onclick = fn2. What happens when the button is clicked?", "opts": ["Both fn1 and fn2 run", "Only fn1 runs", "Only fn2 runs", "Neither runs"], "correct": 2, "exp": "Assigning to the onclick property replaces the previous handler, so only fn2 runs. Use addEventListener to attach multiple handlers." }, { "q": "Which event fires when a user leaves an input field and it loses focus?", "opts": ["focus", "input", "blur", "change"], "correct": 2, "exp": "The blur event fires when an element loses focus. It is ideal for validating a field after the user has finished typing and moved away." }, { "q": "What parameter does JavaScript automatically pass to every event handler function?", "opts": ["The element ID", "The event object", "The page URL", "A boolean true value"], "correct": 1, "exp": "JavaScript automatically passes an event object containing useful information like event.type, event.target, and methods like preventDefault()." }, { "q": "Ali wants to detect the Ctrl+S keyboard shortcut. Which event type should he listen to?", "opts": ["keypress", "keyup", "keydown", "input"], "correct": 2, "exp": "keydown fires as soon as a key is pressed, before it is released. It is best for keyboard shortcuts where you also check e.ctrlKey and e.key together." }, { "q": "Which event and element combination is correct for handling a form submission in JavaScript?", "opts": ["click event on the submit button", "submit event on the form element", "input event on the form element", "change event on the form element"], "correct": 1, "exp": "Always listen to the submit event on the form element itself, not the button click. This correctly handles both button clicks and Enter key submissions." } ]