mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-14 10:01:58 -04:00
feat(curriculum): create javascript events quiz (#56575)
Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
This commit is contained in:
Aakarsh Beohar
@@ -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
|
||||
`<script>myButton.addEventListener('click', myFunction);</script>`
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
`<button id="myButton"></button>`
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
`<button class="myButton">Click me</button>`
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`<button onclick="myFunction()">Click me</button>`
|
||||
|
||||
### --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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user