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

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

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

Select your answer

link.preventDefault();

link.onDefaultPrevent();

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

link.cancelDefault();

Question 2/15

Which JavaScript method simulates an event occurring on an element?

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

Select your answer

button.emitEvent('click');

button.dispatchEvent(new Event('click'));

button.triggerEvent('click');

button.fire('click');

Question 3/15

What is the event type for a HTML form submission?

Select your answer

submit

action

process

send

Question 4/15

What is the correct way to add an event listener for a button click event?

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

Select your answer

button.onClick('click', function() { alert('Button clicked!'); });

button.onclickEvent('click', function() { alert('Button clicked!'); });

button.addEventListener('click', function() { alert('Button clicked!'); });

button.setEventListener('click', alert('Button clicked!'));

Question 5/15

Which event will fire when you right-click on an element?

Select your answer

contextmenu

press

rightclick

mousedown

Question 6/15

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

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

Select your answer

input.trigger('focus');

input.onFocus();

input.setFocus();

input.focus();

Question 7/15

What event is commonly used to update a page when the window is closed?

Select your answer

beforeunload

exit

unload

Question 8/15

Which attribute is used in HTML to call JavaScript when an image finishes loading?

<img src="image.jpg" alt="" />

Select your answer

ondone

onload

onfinish

oncomplete

Question 9/15

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

Select your answer

onhover

hover

mouseover

mouseenter

Question 10/15

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

Select your answer

modify

optionChange

change

select

Question 11/15

How can you detect if a user has changed the value of an input field?

Select your answer

input.addEventListener('focus', function() { ... });

input.addEventListener('change', function() { ... });

input.addEventListener('blur', function() { ... });

input.addEventListener('reset', function() { ... });

Question 12/15

What event would be used to track when a key is pressed down?

Select your answer

keyup

keydown

keypress

keyhold

Question 13/15

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

Select your answer

endScroll

scroll

postScroll

stopScroll

Question 14/15

Which event is fired when an input field gains focus?

Select your answer

focus

blur

select

change

Question 15/15

Which event handler is triggered when a form input field is selected?

Select your answer

select

focus

choose

input

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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.preventDefault();

link.onDefaultPrevent();

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

link.cancelDefault();

You can call

preventDefault()

on the event object to stop the default action.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which JavaScript method simulates an event occurring on an element?

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

Available answers

button.emitEvent('click');

button.dispatchEvent(new Event('click'));

button.triggerEvent('click');

button.fire('click');

The

dispatchEvent

method is used to trigger an event for the specified event type.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the event type for a HTML form submission?

Available answers

submit

action

process

send

The

submit

event is triggered when a form is submitted.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the correct way to add an event listener for a button click event?

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

Available answers

button.onClick('click', function() { alert('Button clicked!'); });

button.onclickEvent('click', function() { alert('Button clicked!'); });

button.addEventListener('click', function() { alert('Button clicked!'); });

button.setEventListener('click', alert('Button clicked!'));

The correct method is

addEventListener

. It attaches an event handler to the specified event.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event will fire when you right-click on an element?

Available answers

contextmenu

press

rightclick

mousedown

The

contextmenu

event is fired when the right mouse button is clicked on an element and can be used to display a custom context menu.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

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

Available answers

input.trigger('focus');

input.onFocus();

input.setFocus();

input.focus();

The

focus()

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

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

What event is commonly used to update a page when the window is closed?

Available answers

beforeunload

exit

unload

The

beforeunload

event is triggered before a page is unloaded and is commonly used to trigger save operations.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which attribute is used in HTML to call JavaScript when an image finishes loading?

<img src="image.jpg" alt="" />

Available answers

ondone

onload

onfinish

oncomplete

The

onload

attribute runs JavaScript when an image has finished loading.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

onhover

hover

mouseover

mouseenter

The

mouseover

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

Question 10/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

modify

optionChange

change

select

The

change

event is fired when the value of an input.addEventListener('focus', function() { ... });

input.addEventListener('change', function() { ... });

input.addEventListener('blur', function() { ... });

input.addEventListener('reset', function() { ... });

The

change

event is used to detect when the value of an input has changed.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What event would be used to track when a key is pressed down?

Available answers

keyup

keydown

keypress

keyhold

The

keydown

event is fired when a key is pressed down.

Question 13/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

scroll

postScroll

stopScroll

The

scroll

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

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is fired when an input field gains focus?

Available answers

focus

blur

select

change

The

focus

event is fired when an element becomes focused.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event handler is triggered when a form input field is selected?

Available answers

select

focus

choose

input

The

select

event is fired when some text in an input field is selected.