1.4 - Events in Detail

Question 1

Mouse events can be splitted into 2 categories, simple and complex, it is right?

Answer 1

YES

Question 2

Mouse events can be split into how many categories? and who are them

Answer 2

2 categories

simple and complex

Question 3

Describe some of the most used simple mouse envents

Answer 3

mousedown / mouseup

mouseover / mouseout

mousemove

Question 4

Some of the most used mouse simple events are:

mousedown / mouseup

mouseover / mouseout

mousemove

Answer 4

YES

Question 5

mousedown / mouseup

Describe it

In what category is it?

Answer 5

description: mouse button is clicked / released over an element
category: simple

Question 6

mouseover / mouseout

Describe it

In what category is it?

Answer 6

description: mouse pointer comes over / out from an element
category: simple

Question 7

mousemove

Describe it

In what category is it?

Answer 7

describe: every mouse move over an elemen triggers that event
category: simple

Question 8

some of the most used complex mouse events are

click

contextmenu

dblclick

?

Answer 8

yes

Question 9

some of the most used complex events are?

Answer 9

click

contextmenu

dblclick

Question 10

complex events are made of simple ones?

Answer 10

yes

Question 11

Complex events are made of …?

Answer 11

simple ones

Question 12

click event

Describe it

In what category is it?

Answer 12

description: triggers after mousedown and then mouseup is released over the same element
category: complex

Question 13

contextmenu event

Describe it

In what category is it?

Answer 13

description: triggers after mousedown if the right mouse button was used
category: complex

Question 14

dblclick

Describe it

In what category is it?

Answer 14

description: triggers after a double click over an element.
category: complex

Question 15

Can an action trigger multiple events?

explain it with an example

Answer 15

YES

a click first triggers mousedown, when the button is pressed, then mouseup and click when it’s released

Question 16

How is the events order in the case when a single action initiates multiple events?

describe the click event

Answer 16

Their order is fixed.

The handlers are called in the order

mousedown -> mouseup -> click

A click first triggers mousedown, when the buttos is pressed, then mouseup and click when it’s released

Question 17

The which property is:

allows to get the mouse button ?

Answer 17

YES

Question 18

What is the usage or purpose of the which property on click-related events?

Answer 18

Click related events always have the which property that allows to get the button

Question 19

The which property it’s used for click and contextmenu events?

Answer 19

No, because those happens only on left click and on right click only

Question 20

When it is usefull the which property on click related events?

Answer 20

When we are tracking mousedown and mouseup, because these events trigger on any button, so which allows to distinguish between “right-mousedown” and “left-mousedown”

Question 21

Name the possible values of the which property

Answer 21

Question 22

All mouse events include the information about pressed modifier keys?

Answer 22

YES

Question 23

Can we know about any modifier key being pressed, when using mouse events?

and why?

Answer 23

YES

because all mouse events include the information about pressed modifier keys

Question 24

What are the modifiers keys?

Answer 24

shiftKey

altKey

ctrlKey

metaKey (cmd for mac)

Question 25

All mouse events have coordinates in 2 flavours

who are them?

Answer 25

window-relative: clientX and clientY

document-relative: pageX and pageY

Question 26

When clicking on text what side-effect may be disturbing?

Answer 26

That a double click selects the text

If we want to handle click events ourselves, then the “extra” selection doesn´t look good.

Question 27

Why mouseove/mouseout and mouseenter/mouseleave are special, what do they have?

Answer 27

the have a relatedTarget

Question 28

In mouseover

what it means

event.target

event.relatedTarget

Answer 28

event.target - is the element where the mouse came over

event.relatedTarget - is the element from which the mouse came

Question 29

In mouseout

what it this:

event.target

event.relatedTarget

?

Answer 29

event.target - is the element that mouse left

event.relatedTarget - is the new under-the-pointer element (that mouse left for)

Question 30

relatedTarget can have a value of null?

Answer 30

YES

Question 31

When and what it means that, relatedTarget can have a value of null?

Answer 31

It’s normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window.

Keep that possibility in mind wen using event.relatedTarget. If we access event.relatedTarget.tagName, then there will be an error.

Question 32

How can we explain this situation?

Answer 32

According to the browser logic, when using mouseover/mouseout the mouse cursor may be only over a single element at any time - the most nested one (and top by z-index).

So if it goes to another element (even a descendant) then it leaves the previous one. That simple!

Question 33

What are the differences between

mouseenter/mouseleave and mouseover/mouseout

?

Answer 33

1 - Transitions inside the element are not counted.

2 - Events mouseenter / mouseleave do not bubble

Question 34

What could be a problem when using mouseenter/mouseleave?

Answer 34

That they don´t bubble.

So we can´t use the event delegation pattern on them.

Question 35

Who are the events that trigger even when we go from the parent element to a child element? and why?

Answer 35

mouseover / mouseout

They assume that the mouse can be only over one element at one time - the deepest one.

Question 36

Who are the events that don´t bubble?

Answer 36

mouseenter / mouseleave do not bubble

Question 37

Who are the events that only track whether the mouse comes inside and outside the element as a whole?

Answer 37

mouseenter / mouseleave

Question 38

Who are the events that do not trigger when the mouse goes to a child element?

Answer 38

mouseenter / mouseleave

Question 39

Who are the events that have an additional target: relatedTarget ?

Answer 39

mouseover / mouseout

mouseenter / mouseleave

Question 40

Who are the events that assume that the omuse can be only over one element at one time - the deepest one?

Answer 40

mouseover / mouseout

Question 41

What is the difference between mousemove, mouseenter and mouseover

Answer 41

The mouseover event triggers when the mouse pointer enters the div element, and its child elements.

The mouseenter event is only triggered when the mouse pointer enters the div element.

The mousemove event triggers every time the mouse pointer is moved over the div element.

Question 42

When listening for the event mousemove, it means that:

every pixel leads to an event?

Explain the answer with an example

Answer 42

NO

The browser checks the mouse position from time to time. And if he notices changes then triggers the events.

That means that if the visitor is moving the mouse very fast then DOM-elements may be skipped:

Question 43

it is true that

clientX/Y coordinates are relative to the top left corner of the visible part of the page(the viewport), “seen” through browser window

Answer 43

yes

Question 44

It is true that

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

Answer 44

yes

Question 45

Tanto pageX/Y como clientX/Y

Son´numeros?

Answer 45

Si son números, que representan coordenadas

Question 46

Tanto pageX/Y como clientX/Y sabemos que son números, pero que representan esos números?

Answer 46

Son coordenadas

Question 47

Tanto pageX/Y como clientX/Y son números, que representan coordenadas, en relación a qué?

Answer 47

pageX/Y: sus coordenadas son en relación a la esquina superior izquierda de toda la página renderizada(inclusive las partes ocultas por hacer scroll)

clientX/Y: sus coordenadas son en relación a la esquina superior izquierda en relación a la viewport( la parte actualmente visible en el navegador )

Question 48

complete:

……. …. coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

Answer 48

pagex / y

Question 49

Complete:

………. …. coordinates are relative to the top left corner of the visible part of the page(the viewport), “seen” through browser window

Answer 49

clientX / Y

Question 50

What is the viewport in HTML

Answer 50

Is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page

Y para evitar cualquier confusión, no es ni el tamaño de la ventana(window) del navegador, ni la resolución de pantalla. Dos ventanas con el mismo tamaño, pero un navegador con más barras de herramientas mostradas tendrá una ventana de visualización más pequeña

Question 51

What is the difference between, clientX/Y and pageX/Y?

Answer 51

pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical “css pixels” a point is from the reference point

The event point is where the user clicked, the reference point is a point in the upper left

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling)

clientX/Y coordinates are relative to the top left corner of the visible part of the page(the viewport), “seen” through browser window

Question 52

Describe pagex/pageY

Answer 52

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

Question 53

Describe clientx/y

Answer 53

clientX/Y coordinates are relative to the top left corner of the visible part of the page, “seen” through browser window

Question 54

Describe the image

Answer 54

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

while clientX/Y coordinates are relative to the top left corner of the visible part of the page(the viewport), “seen” through browser window.

Question 55

pageX, pageY, screenX, screenY, clientX, clientY

it is true that returns a number wich indicates the number of physical “css pixels” a point is from the reference point?

Answer 55

yes

Question 56

pageX, pageY, screenX, screenY, clientX, clientY

it is true that returns a number wich indicates?

Answer 56

the number of physical “css pixels” a point is from the reference point?

Question 57

If we want to track any input into an < input > field, keyboard events are enough?

Answer 57

NO, they are not enough

Question 58

When keydown and keyup events happens?

Answer 58

keydown happens when a key is pressed down

keyup happens when a key is pressed up

Question 59

It is true to say that:

the event.key property allows to get the character

and

the event.code property get the “physical key code”

Answer 59

YES

Question 60

How can we get a character

Answer 60

with event.key

Question 61

How can we get the code of a character?

like “KeyX”

Answer 61

with event.code

Question 62

Suppose a user works with different language, then switching language would make a totally different character if he press Z character.

How will change, key or code

Answer 62

event.code will be always the same “KeyZ”

Question 63

Every key has the …. that depends on its location on the keyboard?

Complete the word

Answer 63

every has the code…

Question 64

Name the key codes for

Letters

Digits

Answer 64

key: KeyA, KeyB, etc…

Digit: Digit0, Digit1, etc…

Question 65

Name the key codes for special keys like:

Enter or backspace or the tab

Answer 65

Enter

Backspace

Tab

Question 66

When working with event.code, case matters?

Answer 66

YES

The first letter of “Key” must be upppercase

Question 67

Witch one is responsible for telling us exactly which key was pressed?

Answer 67

event.code tells us exactly which one was presed, and event.key is responsible for the “meaning” of the key: what is a “shift”

Question 68

When a key is being pressed for a long enough time, it starts to ?

Answer 68

repeat, keydown triggers again and again

Question 69

For all repeating keys the event object has what with what value?

Answer 69

the event object has the event.return property set to true.

Question 70

Which key never generates a keyboard event

Answer 70

The Fn key, there is no keyboard event for it

Question 71

It is true that the lifecycle of an HTML page has three important events?

Answer 71

YES

They are:

DOMContentLoaded

load

beforeunload/unload

Question 72

The lifecycle of an HTML page has how many important events?

and who are them?

Answer 72

3

DOMContentLoaded

load

beforeunload/unload

Question 73

The lifecycle of an HTML page has 3 important events.

One of them is:

beforeunload/unload

and it does: when the user is leaving the page?

Answer 73

YES

Question 74

The lifecycle of an HTML page has 3 important events.

One of them is:

DOMContentLoaded

and what it does is: The browser fully loaded and parsed the HTML document, and the DOM tree is built, but external resources like pictures, stylesheets and subframes may be not yet loaded.

Answer 74

YES

Question 75

The lifecycle of an HTML page has 3 important events.

One of them is:

load

and what it does: The browser loaded all resources (images, styles, etc).

It´s run when not just the HTML has been parsed, but all of the resources like images have been loaded

This is the time the page is fully rendered, meaning if you add something to the page now, there will be a noticable “flash” of the page before your new element appears?

Answer 75

YES

Question 76

The lifecycle of an HTML page has 3 important events.

One of them is:

DOMContentLoaded

What it does?

Answer 76

The browser fully loaded and parsed the HTML document, and the DOM tree is built, but external resources like pictures and stysheets may be not yet loaded.

Another way to express it is: It occurs when all of the HTML is ready to interact with, but often before its been rendered to the screen.

Question 77

The lifecycle of an HTML page has 3 important events.

One of them is:

load

What it does?

Answer 77

The browser loaded all resources (images, styles, etc)

Sometimes we want to run our code when not just the HTML has been parsed, but all of the resources like images have been loaded.

This is the time the page fully rendered, meaning if you do add something to the page now, there will be a noticable “flash” of the page before your new element appears.

Question 78

The lifecycle of an HTML page has 3 important events.

One of them is:

beforeunload/unload

What it does?

Answer 78

when the user is leaving the page

Question 79

It is true that the event DOMContentLoaded happens on the document object, and it`s useful for: When the DOM is ready, the handler can lookup for DOM nodes and initialize the interface?

It’s when the HTML document have been parsed, but the resorces not!

Answer 79

YES

Question 80

It is true that the load event it could be useful for: when additional resources are loaded, we can get image sizes (if not specified in HTML/CSS) etc.

The load event it´s run when not just the HTML has been parsed, but all of the resources like images have been loaded?

Answer 80

YES

Question 81

The beforeunload/unload event could be useful for when: the user is leaving: we can check if the user saved the changes and ask him whether he really wants to leave?

Answer 81

YES

Question 82

It is true that the DOMContentLoaded event could be useful for when…?

and it runs where?

Answer 82

DOMContentLoaded: DOM is ready, so the handler can lookup DOM Nodes, initialize the interface.

It’s when the HTML document is fully parsed, but not the resources like images, and stylesheets.

It runs on the document object, and we need to handler it with addEventListener

Question 83

The load event, could be useful for when?

Answer 83

load event: additional resources are loaded, we can get image sizes (if not specified in HTML/CSS) etc.

Sometimes we want to run our code when not just when the HTML document have been parsed, but all of the resources like images have been loaded.

This is the time the page is fully rendered, meaning if you do add something to the page now, there will be a noticable “flash” of the page before your new element appears.

Question 84

It´s true that the beforeunload/unload could be useful for when?

Answer 84

beforeunload/unload event: the user is leaving: we can check if the user saved the changes and ask him whether he really wants to leave.

Question 85

The DOMContentLoaded event happens where? on what object?

and we need to handler it with what?

Answer 85

On the document object

We need to handle it with the addEventListener method on the document object

Question 86

To cath the DOMContentLoaded event, we need to listenting how?

with gloval events, inline, or addEventListener?

Answer 86

We need to use addEventListener

document.addEventListener(“DOMContentLoaded”, ready);

Question 87

What is going to happen in this script

Answer 87

The DOMContentLoaded handler runs when the document is loaded(the HTML document is pared, but not the resources have been loaded), it not waits for the page load(the load event). So alert shows zero sizes

Question 88

When the browser initially loads HTML and comes across a < script >… < / script > tag, it can´t continue building the DOM. It must execute the script right now.

So what is going to happend if we are listening for DOMContentLoaded?

Answer 88

DOMContentLoaded may only happen after all such scripts are executed.

Question 89

We know that “script /script” tags pause the browser to continue building the DOM until it finish the execution of the script. What other “thing” can put the DOM building to pause?

Answer 89

External scripts (with src) also put DOM building to pause while the script is loading and executing. So DOMContentLoaded waits for external scripts as well.

Question 90

The DOMContentLoaded event can be “paused”, or will be executed in what cases?

Answer 90

DOMContentLoaded waits for script tags in the HTML document, and for external scripts (with src) to execute.

Question 91

When the browser is going to continue processing without waiting for scripts?

and what is the good thing, if there is one?

Answer 91

The only exception are external scripts with “async” and “defer” attributes.

The good thing is that the user can see the page before scripts finish loading.

Question 92

Attributes “async” and “defer” work only for …. ….?

Answer 92

external scripts

they are ignored if there’s no src

Question 93

Talking about order in “async” and “defer”

how script with async executes?

Answer 93

Executes in the load-first order. Their document order doesn´t matter - which loads first runs first

Question 94

Talking about order in “async” and “defer”

how script with defer executes?

Answer 94

Scripts with defer always execute in the document order (as they go in the document)

Question 95

Talking about external scripts with async and defer, in relation to order execution what are the differences?

Answer 95

Scripts with async execute in the load-first order. Their document order doesn´t matter - which loads first runs first.

Scripts with defer always execute in the document order ( as they go in the document )

Question 96

Talking about external scripts with async and defer, in relation to the event DOMContentLoaded, what are the differences

Answer 96

async: May load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough

defer: Execute after the document is loaded and parsed (they wait if needed) right before DOMContentLoaded.

(Se ejecuta despues de que el document se carga y analiza, justo antes de que DOMContentLoaded se ejecute)

Question 97

DomContentLoaded wait for external style sheets?

Answer 97

NO, external style sheets don´t affect DOM.

Question 98

When DOMContentLoaded needs to wait for stylesheets?

Answer 98

If we have a script after the style, then that script must wait for the stylesheet to execute

The script may want to get coordinates and other style-deendent properties of elements. Naturally, it has to wait for styles to load.

As DOMContentLoaded waits for scripts, it now waits for styles before them as well.

Question 99

It is true that Firefox, Chrome and Opera autofill forms on DOMContentLoaded?

Answer 99

YES

Question 100

If DOMContentLoaded is postponed by long-loading scripts, what could happen with autofill?

Answer 100

autofill also waits.

Question 101

Name one of minor benefts in using async and defer for external scripts?

Answer 101

They don´t block DOMContentLoaded and don´t delay browser autofill.

Question 102

The onload event where it happens, in what object?

Answer 102

In the window object

Question 103

The load event, where it happen, in what object?

and when it triggers?

Answer 103

The load event happen on the window object and triggers when the whole page is loaded including styles, images and other resources.

The example below correctly shows image sizes, because window.onload waits for all images

Question 104

How can we do something when a visitor leaves the page?

Answer 104

With the window.onunload event, we can do something there that doesn´t involve a delay, like closing related poups windows. But we can´t cancel the transtition to another page.

Question 105

What happens when a visitor initiated leaving the page or tries to close the window?

Answer 105

The window.onbeforeunload handler can trigger, for example asking for additional confirmation. It needs to return the string with a question.

window.onbeforeunload = function() {

return “There are unsaved changes. leave now?;

};

Question 106

When triggering the handler window.onbeforeunload, what some browsers will do?

Answer 106

Some browsers ignore the text and show their own message instead. It’s for sheer safety(pura seguridad), to protect the user from potentially misleading and hackish messages.

Question 107

What happens if we set the DOMContentLoaded handler after the document is loaded?

and why?

Answer 107

Naturally, it never runs!

Question 108

Let´s imagine that an external script with async attribute loads and runs asynchronously. Depending on the network, it may load and execute before the document is complete or after that, we can´t be sure… So what can we do in that case?

Answer 108

We should be able to know the current state of the document, and we can do it with the document.readyState property, that gives us information about it.

Question 109

It is true that the document.readyState property gives us information about the current state of the document?

Answer 109

YES

Question 110

How many possible values have the property document.readyState?

Answer 110

3 possible values

Question 111

So the document.readyState property gives us 3 possible values to know the current state of the document.

Name them?

Answer 111

loading

interactive

complete

Question 112

How many values gives us the property document.readyState, and

what are their name/s?

And what is the purpose of this property?

Answer 112

It has 3 possible values

loading, interactive, complete

It purpose it’s to give us information about the current state of the document.

Question 113

What it means the “loading” state of the document.readyState property?

Answer 113

The document is loading

Question 114

What it means the “interactive” state of the document.readyState property?

Answer 114

interactive: the document was fully read

Question 115

What it means the “complete” state of the document.readyState property?

Answer 115

complete: The document was fully read and all resources (like images) are loaded too.

Question 116

We know that we can check the current state of the document,

how can we do it?

Can we set up a handler or execute a code immediately if it’s ready?

Answer 116

we can do it via the property: document.readyState

We can check the document.readyState and setup a handler or execute the code immediately if it´s ready

Question 117

What event is the one that triggers when the state of the document change?

Answer 117

the readystatechange event

Question 118

Cuando una página se encuentra desde la fase inicial de carga(load) hasta que es cargada por completa, pasa por una serie de etapas. Hay algunos factores que pueden determinar cuando se van a ejecutar y cargar ciertas partes del document, por lo tanto, nombra algunos de estos factores que influyen o pueden hacer uso de las distintas fases…

Answer 118

The DOMContentLoaded event

the load event

the async attribute for script elements

the defer attribute for script elements

the location your scripts live in the DOM

Question 119

How many stages of a page load exists?

Answer 119

3 stages

Question 120

Describe the Stage 1 of a page load?

Answer 120

The first stage is when your browser is about to start loading a new page.

At this stage there isn´t anything interesting going on, a request has been made to load a page, but nothing has been downloaded yet.

Question 121

Describe the Stage 2 of a page load?

Answer 121

The raw markup and DOM of your page has been loaded and parsed:

The thing to note about this stage is that external resources like images and stylesheets have not been parsed. You only see the raw content specified by your page/document´s markup

Question 122

Describe the stage 3 of a page load?

Answer 122

The final stage is where your page is fully loaded with any images, stylesheets, scripts and other external resources making their way into what you see

This is the stage where your browser´s loading indicators stop animating, and this is also the stage you almost always find yourself in when interacting with your HTML document

Question 123

We know that there are 2 events that represents 2 important milestones while your page loads.

Who are them, and what stages they represent

Answer 123

DOMContentLoaded event fires at the end of Stage #2 when your page´s DOM is fully parsed.

load event fires at the end of Stage #3 once your page has fully loaded.

Question 124

Why load and DOMContentLoaded events are important?

Answer 124

Any code that works with the DOM(querySelector… etc), need to be sure that runs only after the DOM is fully loaded.

Accesing the DOM before it has fully loaded, may get incomplete results or no results at all.

Question 125

How can we be sure that our code runs before the DOM is ready?

Answer 125

Listening for the DOMContentLoaded event and let all of the code that relies on the DOM to run only after that event is overheard.

Question 126

It is true that script elements position in the DOM affects when they run?

and why?

Answer 126

The browser parses your DOM sequentially from the top to the bottom. Any script elements that get found along the way will get parsed in the order they appear in the DOM

Question 127

Because the DOM gets parsed from top to bottom, the scripts elements has access to all of the DOM elements that were already parsed.

What happens to the DOM elements that have NOT yet been parsed?

Answer 127

The script/s will not have access to any DOM elements that have not yet been parsed

Question 128

How can we avoid the whole process of listening to DOMContentLoaded event?

Answer 128

If we put all the code that deals with elements on the DOM at the bottom of the the page, the end behaivor is identical to what we are going to get listening to DOMContentLoaded event.

If we want to have our scripts at the top of the DOM, we need to listen to DOMContentLoaded event.

Question 129

It is say that the async attribute may a script to run:

The script will run whenever it is able to

It won´t block the rest of the browser from doing its thing

It will not run in order

Answer 129

YES

Question 130

async and defer, who is the one that will run in order?

Answer 130

async NOT run in order

defer YES it will run in order

Question 131

If we have several scripts markes as async how they will run?

Answer 131

They will NOT run in order.

They will run in a order DIFFERENT than what they were specified in your markup

Question 132

Scripts marked with defer run in thr order which they were defined?

Answer 132

YES

Question 133

Scripts marked with defer attribute when do they get executed, before or after DOMContentLoaded event gets fired?

Answer 133

before the DOMContentLoaded event gets fired

Question 134

Take a second and tell the order in which these scripts will run?

Answer 134

inline 1

external 1

inline 2

inline 3

external 3

external 2

The external 3, and external 2 scripts are marked as defer, and that´s why they appear at the very end, despite being declared in different locations in your markup.

Question 135

When is the right time to load your JS? regarding to the load and DOMContentLoaded event

1) Where to place the scripts?

2 Unless we are not creating a library that other will use, what can we do?

3) The script references, how can we marked them
4) If we have code that doesn´t rely on the DOM being loaded and runs as part of teeing things off for other scripts in your document, where we can place the scripts?

Answer 135

1) place the script references below the DOM directly above the closing body element
2) we don´t need to complicate the code by listening to the DOMContentLoaded or load event.
3) Mark the script references with asyn attribute.
4) we can place the script at the top of our page with the async attribute set on it.

Question 136

Document forms are members of the special collection: document.forms?

and

We can use both the name and the humber to get the form?

Answer 136

YES

YES

Question 137

1) Document forms are members of what special collection?
2) how can we get the form?

Answer 137

1) document.forms
2) We can use the name and the number to get the form

Question 138

When we have the form, any element is available in the named collection: form.elements?

Answer 138

YES

Question 139

When we have a form, hown can we get the elements?

Answer 139

Any element is available in the named collection: form.elements.

Question 140

What happens to form.elements if there are multiple elements with the same name ex: radio buttons

Answer 140

form.elements[name] is a collection

Question 141

When working with forms, the navigation properties as document.form, form.elements, etc… depende on the tag structure? and why?

Answer 141

NO, all elements, no matter how deep they are in the form, are available in form.elements.

Question 142

on a form, fieldsets support the elements property?

Answer 142

YES

Question 143

When working with forms, what is the shorter notation for accessing elements, insetad of form.elements.login

Answer 143

The shorter notation is form[index/name]

form.login

Question 144

It is true that for any element, the form is avaiable as element.form. So a form references all elements, and elements, reference the form.

Answer 144

YES

Question 145

Exist a backreference when working with elements on a form, between a form and their elements? explain it?

Answer 145

YES

For any element, the form is avaiable as element.form. So a form references all elements, and elements reference the form.

Question 146

How can we access the value of an input or for example a checkbox?

Answer 146

We can access the values as

input.value

input.checked

Question 147

It is true that an element receives a focus when the user either clicks on it or uses the Tab key on the keyboard?

Answer 147

YES

Question 148

It is true that the HTML attribute autofocus puts the focus into an element by default when a page loads.

Answer 148

YES

Question 149

What are the possibles ways that elements can receive focus

Answer 149

1 - when the user either clicks on it or uses the Tab key.

2 - With the HTML attribute autofocus, it puts the focus into an element by default when a page loads.

Question 150

What it means Focusing?

Answer 150

It means: “prepare to accept the data here”

Question 151

loosing focus (“blur”) when it could happend?

Answer 151

When a user clicks somewhere else or presses Tab to go to the next form field, or there are other means as well.

Question 152

loosing the focus generally means? and what could we do when loosing focus

Answer 152

“The data has been entered”

we can run the code to check it or even to save it to the server and so on.

Question 153

What is the purpose of using JS when focus/blur if moderl HTML allows validations using input attributes like: required, pattern, etc

Answer 153

JS can be used when we want more flexibility, we could automatically send the changed value to the server if it’s correct.

Question 154

What it does the methods:

elem.focus()

elem.blur()

Answer 154

.focus() - it sets the focus on the element

.blur() - unset the focus on the element

Question 155

What this code will do?

Answer 155

The visitor is unable to leave the input if the value is invalid.

If we enter something into the input and then try to use Tab or click away from the input, then onblur returns the focus back.

Question 156

Javascript can cause “focus loss” ?

explain it

Answer 156

YES it can cause it

1 - An alert moves focus to itself, it causes the focus loss at the element (blur event), whenthe alert is dismissed, the focus comes back (focus envet)

2 - In af element is removed from DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn´t return.

Question 157

Hown can an alert box cause a focus loss?

Answer 157

An alert moves the focus to itself, so it causes the focus loss at the element(blur event), and when the alert is dismissed, the focus comes back (focus event)

Question 158

If an element is removed from the DOM, it causes focus loss? explain it?

Answer 158

YES

If an element is removed from the DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn´t return.

Question 159

When working with focus events, we know that JS by itself sometimes can cause a focus-loss(on alert and when an element is removed from the DOM), so what could we do to prevent or take care of this scenarios, if we want to track user-initiated focus-loss?

Answer 159

We can be careful when using these events. If we want to track user-initiated focus-loss, then we should evade causing it by ourselves.

Question 160

All elements support focusing? explain it

Answer 160

NO

elements that exist to format something like div, span, table, are unfocusable by default

Question 161

focus/blur support is guaranteed for elements that … ?

Answer 161

elements that visitors can interact with: button, input, select, a, etc…

Question 162

We know that some elements(the one that exist to format something: div, span…) are unfocusable by default, how can we make them/transform them to focusables

Answer 162

using the HTML attribute tabindex

Question 163

What is the purpose of the HTML attribute

tabindex

Answer 163

To specify the order number of the element when Tab is used to switch between them.

Question 164

the HTML attribute tabindex has how many special values, and what they do?

Answer 164

2 special values

tabindex=”0” - makes the element the last one

tabindex=”1” - means that Tab should ignore that element.

Question 165

Any element that has the tabindex html attribute can be focused?

Answer 165

YES

Question 166

What is the order of focusing on pressing tab

Answer 166

The order is like this:

1, 2, 0 (zero is always the last). Normally li does not support focusing, but tabindex full enables it

Question 167

Can we add the tabindex html attribute, via JS?

if yes, how?

Answer 167

YES

We can add tabindex from JS by using the elem.tabIndex property.

Question 168

focus and blur, make use of the capturing of bubbling phase

Answer 168

capturing phase

Question 169

What is going to happend on this code:

Answer 169

It doesn´t work, because when user focuses on an input, the focus event triggers on that input only. It doesn´t bubble up. So form.onfocus never triggers

Question 170

What will happend on this code, this will work?

Answer 170

Yes it work, because focus/blur do not bubble up, but propagate down on the capturing phase.

Question 171

Since focus/blur do not bubble, what other similar events do we have that bubble up?

Answer 171

focusin and focusout

They must be assigned with the method addEventListener, not on on<event></event>

Question 172

This will work?

Answer 172

Yes it will propage thanks to the bubbling phase that focusin and focusout event make use of.

And we are correcly adding these two events with addEventListener

Question 173

It is true that the change event triggers when the element has finished changing?

Answer 173

YES

Question 174

When the change event is going to trigger?

example for:

inputs, select, input type=checkbox/radio

Answer 174

The event occurs

inputs: means that the event occurs when it looses focus

select, input type=checkbox/radio - triggers right after the selection changes

Question 175

It is true that the input event triggers every time a value is modified?

Answer 175

YES

Question 176

When the input event triggers?

Answer 176

every time a value is modified

Question 177

When we have an input form element, and we want to handle every modification of it, what event is the best choice?

give one reason

Answer 177

the input event

It works on any value change, even those that doesn´t involve keyboard actions.