Loading... Login Loading... Register

JavaScript Event Handling Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which event would you use to execute a function after a user stops scrolling?

Select your answer

endScroll

postScroll

scroll

stopScroll

Question 2/15

Which event is used to detect when the browser can begin to render a document?

Select your answer

load

startRender

render

DOMContentLoaded

Question 3/15

How can you capture the 'Escape' key press in a keydown event?

Select your answer

event.code === 'Esc'

event.key === 'Escape'

event.keyCode === 27

event.which === 27

Question 4/15

How do you prevent the default action of an event in JavaScript?

let link = document.getElementById('myLink');

Select your answer

link.addEventListener('click', function(event) { event.preventDefault(); });

link.preventDefault();

link.onDefaultPrevent();

link.cancelDefault();

Question 5/15

Which event is fired when an input field gains focus?

Select your answer

blur

select

change

focus

Question 6/15

What attribute can you use to execute JavaScript code when an event occurs?

<button id="myButton">Click me</button>

Select your answer

onevent

script

click

onclick

Question 7/15

Which event would you use to detect when the selected value of a dropdown changes?

Select your answer

change

select

optionChange

modify

Question 8/15

Which method allows you to trigger a focus event on an element?

let input = document.getElementById('myInput');

Select your answer

input.onFocus();

input.trigger('focus');

input.focus();

input.setFocus();

Question 9/15

Which event is fired when the DOM has been completely loaded?

Select your answer

initialize

load

ready

DOMContentLoaded

Question 10/15

Which event is triggered when you move the mouse pointer onto an element?

Select your answer

hover

mouseenter

mouseover

onhover

Question 11/15

How can you trigger a click event manually in JavaScript?

let button = document.getElementById('myButton');

Select your answer

button.invoke('click');

button.click();

button.fireEvent('click');

button.trigger('click');

Question 12/15

When does the 'input' event trigger?

Select your answer

Only when the input field loses focus after editing.

When any input value changes, regardless of if the change is committed.

When the input field is focused.

When the form is submitted.

Question 13/15

What is the method to remove an event listener in JavaScript?

let button = document.getElementById('myButton');

Select your answer

button.cancelEventListener('click', myFunction);

button.deleteEventListener('click', myFunction);

button.removeEventListener('click', myFunction);

button.detachEventListener('click', myFunction);

Question 14/15

Which event is fired when the browser window is resized?

Select your answer

increase

resize

zoom

change

Question 15/15

What happens if you attach multiple event listeners to the same event?

let button = document.getElementById('myButton');

Select your answer

Only the last-added event listener will be triggered.

Only the first-added event listener will be triggered.

All event listeners for the event will be triggered, in the order they were added.

An error will occur and no event listeners will be triggered.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event would you use to execute a function after a user stops scrolling?

Available answers

endScroll

postScroll

scroll

stopScroll

The

scroll

event is fired continuously while scrolling, so you would use a debounce function to execute after scrolling stops.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is used to detect when the browser can begin to render a document?

Available answers

load

startRender

render

DOMContentLoaded

The

DOMContentLoaded

event triggers when the HTML has been completely loaded and parsed, but external resources such as images may not be completely loaded.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you capture the 'Escape' key press in a keydown event?

Available answers

event.code === 'Esc'

event.key === 'Escape'

event.keyCode === 27

event.which === 27

The 'Escape' key has a keyCode of 27, so you use

event.keyCode === 27

to check for it.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you prevent the default action of an event in JavaScript?

let link = document.getElementById('myLink');

Available answers

link.addEventListener('click', function(event) { event.preventDefault(); });

link.preventDefault();

link.onDefaultPrevent();

link.cancelDefault();

You can call

preventDefault()

on the event object to stop the default action.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is fired when an input field gains focus?

Available answers

blur

select

change

focus

The

focus

event is fired when an element becomes focused.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

What attribute can you use to execute JavaScript code when an event occurs?

<button id="myButton">Click me</button>

Available answers

onevent

script

click

onclick

The

onclick

attribute is used to specify JavaScript code to run when the button is clicked.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event would you use to detect when the selected value of a dropdown changes?

Available answers

change

select

optionChange

modify

The

change

event is fired when the value of an input.onFocus();

input.trigger('focus');

input.focus();

input.setFocus();

The

focus()

method is used to trigger a focus event on an element.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is fired when the DOM has been completely loaded?

Available answers

initialize

load

ready

DOMContentLoaded

The

DOMContentLoaded

event occurs when the HTML document has been fully loaded and parsed.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is triggered when you move the mouse pointer onto an element?

Available answers

hover

mouseenter

mouseover

onhover

The

mouseover

event is triggered when a mouse pointer is moved onto an element.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you trigger a click event manually in JavaScript?

let button = document.getElementById('myButton');

Available answers

button.invoke('click');

button.click();

button.fireEvent('click');

button.trigger('click');

You can programmatically trigger a click event using

button.click();

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

When does the 'input' event trigger?

Available answers

Only when the input field loses focus after editing.

When any input value changes, regardless of if the change is committed.

When the input field is focused.

When the form is submitted.

The

input

event is triggered immediately when the value of an input element is changed by the user.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the method to remove an event listener in JavaScript?

let button = document.getElementById('myButton');

Available answers

button.cancelEventListener('click', myFunction);

button.deleteEventListener('click', myFunction);

button.removeEventListener('click', myFunction);

button.detachEventListener('click', myFunction);

removeEventListener

is used to remove a previously attached event listener.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is fired when the browser window is resized?

Available answers

increase

resize

zoom

change

The

resize

event is triggered when the browser window changes size.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens if you attach multiple event listeners to the same event?

let button = document.getElementById('myButton');

Available answers

Only the last-added event listener will be triggered.

Only the first-added event listener will be triggered.

All event listeners for the event will be triggered, in the order they were added.

An error will occur and no event listeners will be triggered.

All event listeners for a given event are triggered in the order they were added, unless propagation is otherwise interfered with.