diff --git a/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md b/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md index c23b2f1b888..c8a22ccb746 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md @@ -17,439 +17,449 @@ Answer all of the questions below correctly to pass the quiz. #### --text-- -Placeholder question +Which method is used to listen to events in JavaScript? #### --distractors-- -Placeholder distractor 1 +`.getElementById()` --- -Placeholder distractor 2 +`.createElement()` --- -Placeholder distractor 3 +`.innerHTML` #### --answer-- -Placeholder answer +`.addEventListener()` ### --question-- #### --text-- -Placeholder question +What does this code demonstrate? + +```js +const parentList = document.getElementById('parent-list'); + +parentList.addEventListener('click', function(event) { + if (event.target && event.target.nodeName === 'LI') { + console.log('List item clicked:', event.target.textContent); + } +}); +``` #### --distractors-- -Placeholder distractor 1 +DOM Manipulation --- -Placeholder distractor 2 +Event Bubbling --- -Placeholder distractor 3 +Callback Function #### --answer-- -Placeholder answer +Event Delegation ### --question-- #### --text-- -Placeholder question +What is the term for a function that runs in response to an event? #### --distractors-- -Placeholder distractor 1 +Middleware function --- -Placeholder distractor 2 +Promise function --- -Placeholder distractor 3 +Asynchronous function #### --answer-- -Placeholder answer +Callback function ### --question-- #### --text-- -Placeholder question +What does the `event.target` property return? #### --distractors-- -Placeholder distractor 1 +The parent of the event object --- -Placeholder distractor 2 +The HTML document --- -Placeholder distractor 3 +The window object #### --answer-- -Placeholder answer +The element that triggered the event ### --question-- #### --text-- -Placeholder question +How do you correctly pass an argument to an event handler function in JavaScript? #### --distractors-- -Placeholder distractor 1 +`addEventListener('click', myFunction())` --- -Placeholder distractor 2 +`addEventListener('click', myFunction.argument)` --- -Placeholder distractor 3 +`addEventListener('click', parameter => myFunction(argument))` #### --answer-- -Placeholder answer +`addEventListener('click', () => myFunction(argument))` ### --question-- #### --text-- -Placeholder question +Which event type captures an input event across all types of input fields? #### --distractors-- -Placeholder distractor 1 +`keyup` --- -Placeholder distractor 2 +`keypress` --- -Placeholder distractor 3 +`keydown` #### --answer-- -Placeholder answer +`input` ### --question-- #### --text-- -Placeholder question +What is the main advantage of using `addEventListener()` over inline event handlers? #### --distractors-- -Placeholder distractor 1 +It supports synchronous handling --- -Placeholder distractor 2 +It reduces CSS file size --- -Placeholder distractor 3 +It can't be removed once added #### --answer-- -Placeholder answer +It allows multiple event listeners to be attached to a single element ### --question-- #### --text-- -Placeholder question +What is the purpose of the `event.preventDefault()` method? #### --distractors-- -Placeholder distractor 1 +To stop the event from propagating to other listeners --- -Placeholder distractor 2 +To set a default value to the event --- -Placeholder distractor 3 +To remove the event handler #### --answer-- -Placeholder answer +To prevent the default action associated with an event from being executed ### --question-- #### --text-- -Placeholder question +What does the term "event propagation" refer to? #### --distractors-- -Placeholder distractor 1 +Events can only be handled by inline handlers --- -Placeholder distractor 2 +Events are triggered by CSS changes --- -Placeholder distractor 3 +Events are copied to a new window #### --answer-- -Placeholder answer +Events travel through the DOM in phases ### --question-- #### --text-- -Placeholder question +What event handler would you use to detect a right-click on an element? #### --distractors-- -Placeholder distractor 1 +`click` --- -Placeholder distractor 2 +`hover` --- -Placeholder distractor 3 +`mousedown` #### --answer-- -Placeholder answer +`contextmenu` ### --question-- #### --text-- -Placeholder question +Which of the following is an example of an inline event handler? #### --distractors-- -Placeholder distractor 1 +`` --- -Placeholder distractor 2 +`` --- -Placeholder distractor 3 +`` #### --answer-- -Placeholder answer +`` ### --question-- #### --text-- -Placeholder question +Which of the following is a common use case for event delegation? #### --distractors-- -Placeholder distractor 1 +Preventing default browser behaviors --- -Placeholder distractor 2 +Canceling event propagation --- -Placeholder distractor 3 +Creating custom events #### --answer-- -Placeholder answer +Handling click events on dynamically created elements ### --question-- #### --text-- -Placeholder question +What is meant by the "default action" of an event in JavaScript? #### --distractors-- -Placeholder distractor 1 +The event's propagation is stopped automatically --- -Placeholder distractor 2 +An external stylesheet is applied --- -Placeholder distractor 3 +The event listener is called twice #### --answer-- -Placeholder answer +The browser's predefined behavior that occurs after an event is triggered ### --question-- #### --text-- -Placeholder question +Why is the once option in `addEventListener()` useful? #### --distractors-- -Placeholder distractor 1 +It makes the event listener asynchronous --- -Placeholder distractor 2 +It allows capturing to be the default phase --- -Placeholder distractor 3 +It stops the event from bubbling up #### --answer-- -Placeholder answer +It ensures that the event listener is removed after being triggered once ### --question-- #### --text-- -Placeholder question +What property refers to the HTML element to which the event handler is attached? #### --distractors-- -Placeholder distractor 1 +`event.caller` --- -Placeholder distractor 2 +`event.this` --- -Placeholder distractor 3 +`event.parent` #### --answer-- -Placeholder answer +`event.currentTarget` ### --question-- #### --text-- -Placeholder question +How does the concept of event delegation improve performance? #### --distractors-- -Placeholder distractor 1 +It creates separate listeners for each child --- -Placeholder distractor 2 +It prevents child elements from triggering events --- -Placeholder distractor 3 +It limits event propagation to the capturing phase #### --answer-- -Placeholder answer +It reduces the number of event listeners by using a single listener on a parent element ### --question-- #### --text-- -Placeholder question +Why is it important to remove event listeners when they are no longer needed? #### --distractors-- -Placeholder distractor 1 +It makes the page load slower --- -Placeholder distractor 2 +It prevents CSS styles from being applied --- -Placeholder distractor 3 +It breaks JavaScript execution #### --answer-- -Placeholder answer +It improves performance and reduces memory leaks ### --question-- #### --text-- -Placeholder question +What does the `DOMContentLoaded` event indicate? #### --distractors-- -Placeholder distractor 1 +The page fully loaded with all images --- -Placeholder distractor 2 +Only external styles are loaded --- -Placeholder distractor 3 +The page is still loading #### --answer-- -Placeholder answer +The HTML document has been completely loaded and parsed ### --question-- #### --text-- -Placeholder question +What is the role of `stopPropagation()` in event handling? #### --distractors-- -Placeholder distractor 1 +To execute the default behavior of the event --- -Placeholder distractor 2 +To start event capturing --- -Placeholder distractor 3 +To bind the event handler to multiple events #### --answer-- -Placeholder answer +To stop the event from propagating to parent elements ### --question-- #### --text-- -Placeholder question +How can you remove all event listeners attached to an element? #### --distractors-- -Placeholder distractor 1 +`element.removeAllListeners()` --- -Placeholder distractor 2 +`element.removeEventListeners()` --- -Placeholder distractor 3 +`element.clearEventListeners()` #### --answer-- -Placeholder answer +There is no direct way to remove all event listeners