JavaScript - Events

Question 1

An event is something that _______ in the ______ (in our case, on our page). We can instruct our code to listen for _______, then execute code when that ______ occurs.

Answer 1

An event is something that happens in the application (in our case, on our page). We can instruct our code to listen for events, then execute code when that event occurs.

Question 2

JavaScript’s main purposes is to add ________ to your pages: the user does something and the page reacts. Events help accomplish this purpose.

Answer 2

JavaScript’s main purposes is to add interactivity to your pages: the user does something and the page reacts. Events help accomplish this purpose.

Question 3

Types of Events:

Answer 3

click
mouseenter
mouseleave
keydown,keyup
window.load (gets triggered when the page is fully loaded)
dragover
ondrop

Question 4

Attaching as an attribute directly on an element in html

Answer 4

<p>Click here</p>

Question 5

Attaching as a property on an element in JavaScript

Answer 5

targetElement.onclick = function(){

};

Question 6

Using the addEventListener syntax - preferred

Answer 6

element.addEventListener('click', handlerFunction, false);
function handlerFunction(e){
	console.log(e); 
	console.log(e.type);
	console.log(e.target); 
}

Question 7

The object “e” refers to the _____ object that was created when the _____ occurred.

Answer 7

The object “e” refers to the event object that was created when the event occurred.

Question 8

e.target refers to the _______ that triggered the _______.

Answer 8

e.target refers to the element that triggered the event.

Question 9

What happens behind the scenes of register/listen?

Answer 9

Register/listen for “click” event on an element
User clicks that element
Browser creates event object, also called “e”, and calls event handler function
Event Handler gets triggered with the event object as a parameter
Event handler code runs
Forms

Question 10

Targeting by using name attributes:

Answer 10

var targetElement = document.forms.formName.elementName;

Question 11

Targeting by using getElementById:

Answer 11

var targetElement = document.getElementById(formElementId);

Question 12

This table shows common element types and properties used to retrieve values and states

Answer 12

Element	Property
input type="text"	.value
input type ="checkbox"	.checked
input type="radio" .checked
select .selectedIndex

Question 13

We can access an input value using the following code:

Answer 13

We can access an input value using the following code:

console.log(targetInput.value)

Question 14

The .______ property works for other input elements including color picker, date, range and even checkbox and radio buttons. The select element also has a ______ property.

Answer 14

The .value property works for other input elements including color picker, date, range and even checkbox and radio buttons. The select element also has a value property.

Question 15

Once form values have been retrieved you can use JavaScript to check if the input is _____. Usually, this _______ is performed when the form is ______.

Answer 15

Once form values have been retrieved you can use JavaScript to check if the input is valid. Usually, this validation is performed when the form is submitted.

Question 16

When validating a form, remember to use “________;” in the form’s submit handler to prevent a form from being submitted to its “______” page.

Answer 16

When validating a form, remember to use “return false;” in the form’s submit handler to prevent a form from being submitted to its “action” page.

Question 17

Use _____._____(); to submit a form using Javascript.

Answer 17

Use formElement.submit(); to submit a form using Javascript.

Question 18

Form elements may be validated using an element’s “______” event that gets triggered when an element’s value is _____.

Answer 18

Form elements may be validated using an element’s “change” event that gets triggered when an element’s value is changed.

Question 19

Other common events used with form elements:

Answer 19

blur

focus

Question 20

A timeout is essentially a ______. When the countdown is complete, a ______ will be called. The timeout expires when the countdown is ________ or when the author has decided to _____ it.

Answer 20

A timeout is essentially a countdown. When the countdown is complete, a function will be called. The timeout expires when the countdown is complete or when the author has decided to remove it.

Question 21

An interval, like a timeout will execute a ______ after a specified period of time. However, it will continue to execute that ______ (with the specified delay between function calls) until it is _______.

Answer 21

An interval, like a timeout will execute a function after a specified period of time. However, it will continue to execute that function (with the specified delay between function calls) until it is canceled.

Question 22

Timeout Example:

Answer 22

var timeoutId = window.setTimeout(ticker, 2000);
function ticker(){    
	console.log("tick"); 
}

Question 23

Interval Example:

Answer 23

var intervalId = window.setInterval(ticker, 2000); 
	function ticker(){    
	console.log("tick"); 
}

Question 24

Clear timeouts and intervals:

Answer 24

clearTimeout(timeoutId);

clearInterval(intervalId);