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

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

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

Select your answer

button.deleteEventListener('click', myFunction);

button.detachEventListener('click', myFunction);

button.removeEventListener('click', myFunction);

button.cancelEventListener('click', myFunction);

Question 2/15

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

Select your answer

exit

beforeunload

unload

Question 3/15

What is the event type for a HTML form submission?

Select your answer

action

send

submit

process

Question 4/15

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

Select your answer

optionChange

change

modify

select

Question 5/15

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

Select your answer

scroll

postScroll

endScroll

stopScroll

Question 6/15

What is the correct method to stop event propagation?

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

Select your answer

event.prevent();

event.stopImmediatePropagation();

event.stopPropagation();

event.cancelPropagation();

Question 7/15

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

Select your answer

event.keyCode === 27

event.key === 'Escape'

event.which === 27

event.code === 'Esc'

Question 8/15

What does the 'this' keyword refer to in an event handler?

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

Select your answer

The event object.

The button element that triggered the event.

The window object.

The parent element of the button.

Question 9/15

Which event is fired when the browser window is resized?

Select your answer

resize

change

zoom

increase

Question 10/15

Which of the following is NOT a valid way to attach an event handler in JavaScript?

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

Select your answer

button.setEvent('click', myFunction);

button.onclick = function() { alert('clicked'); };

button['click'] = myFunction;

button.addEventListener('click', myFunction);

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.trigger('click');

button.fireEvent('click');

Question 12/15

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

Select your answer

keyhold

keypress

keyup

keydown

Question 13/15

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

Select your answer

load

startRender

render

DOMContentLoaded

Question 14/15

When does the 'input' event trigger?

Select your answer

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

Only when the input field loses focus after editing.

When the form is submitted.

When the input field is focused.

Question 15/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.onclickEvent('click', function() { alert('Button clicked!'); });

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

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

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

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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.deleteEventListener('click', myFunction);

button.detachEventListener('click', myFunction);

button.removeEventListener('click', myFunction);

button.cancelEventListener('click', myFunction);

removeEventListener

is used to remove a previously attached event listener.

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

exit

beforeunload

unload

The

beforeunload

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

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the event type for a HTML form submission?

Available answers

action

send

submit

process

The

submit

event is triggered when a form is submitted.

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

optionChange

change

modify

select

The

change

event is fired when the value of an scroll

postScroll

endScroll

stopScroll

The

scroll

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

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the correct method to stop event propagation?

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

Available answers

event.prevent();

event.stopImmediatePropagation();

event.stopPropagation();

event.cancelPropagation();

stopPropagation()

stops the event from bubbling up the DOM tree.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

event.keyCode === 27

event.key === 'Escape'

event.which === 27

event.code === 'Esc'

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

event.keyCode === 27

to check for it.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does the 'this' keyword refer to in an event handler?

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

Available answers

The event object.

The button element that triggered the event.

The window object.

The parent element of the button.

In an event handler,

this

refers to the element that received the event.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which event is fired when the browser window is resized?

Available answers

resize

change

zoom

increase

The

resize

event is triggered when the browser window changes size.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following is NOT a valid way to attach an event handler in JavaScript?

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

Available answers

button.setEvent('click', myFunction);

button.onclick = function() { alert('clicked'); };

button['click'] = myFunction;

button.addEventListener('click', myFunction);

setEvent

and

button['click']

are not valid ways to set an event handler in JavaScript.

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.trigger('click');

button.fireEvent('click');

You can programmatically trigger a click event using

button.click();

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

keyhold

keypress

keyup

keydown

The

keydown

event is fired when a key is pressed down.

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

😊 Your answer was correct 🙁 Your answer was incorrect

When does the 'input' event trigger?

Available answers

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

Only when the input field loses focus after editing.

When the form is submitted.

When the input field is focused.

The

input

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

Question 15/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.onclickEvent('click', function() { alert('Button clicked!'); });

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

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

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

The correct method is

addEventListener

. It attaches an event handler to the specified event.