1.4 - Events in Detail Flashcards
1
Q
Mouse events can be splitted into 2 categories, simple and complex, it is right?
A
YES
2
Q
Mouse events can be split into how many categories? and who are them
A
2 categories
simple and complex
3
Q
Describe some of the most used simple mouse envents
A
mousedown / mouseup
mouseover / mouseout
mousemove
4
Q
Some of the most used mouse simple events are:
mousedown / mouseup
mouseover / mouseout
mousemove
A
YES
5
Q
mousedown / mouseup
Describe it
In what category is it?
A
description: mouse button is clicked / released over an element
category: simple
6
Q
mouseover / mouseout
Describe it
In what category is it?
A
description: mouse pointer comes over / out from an element
category: simple
7
Q
mousemove
Describe it
In what category is it?
A
describe: every mouse move over an elemen triggers that event
category: simple
8
Q
some of the most used complex mouse events are
click
contextmenu
dblclick
?
A
yes
9
Q
some of the most used complex events are?
A
click
contextmenu
dblclick
10
Q
complex events are made of simple ones?
A
yes
11
Q
Complex events are made of …?
A
simple ones
12
Q
click event
Describe it
In what category is it?
A
description: triggers after mousedown and then mouseup is released over the same element
category: complex
13
Q
contextmenu event
Describe it
In what category is it?
A
description: triggers after mousedown if the right mouse button was used
category: complex
14
Q
dblclick
Describe it
In what category is it?
A
description: triggers after a double click over an element.
category: complex
15
Q
Can an action trigger multiple events?
explain it with an example
A
YES
a click first triggers mousedown, when the button is pressed, then mouseup and click when it’s released
16
Q
How is the events order in the case when a single action initiates multiple events?
describe the click event
A
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
17
Q
The which property is:
allows to get the mouse button ?
A
YES
18
Q
What is the usage or purpose of the which property on click-related events?
A
Click related events always have the which property that allows to get the button
19
Q
The which property it’s used for click and contextmenu events?
A
No, because those happens only on left click and on right click only
20
Q
When it is usefull the which property on click related events?
A
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”
21
Q
Name the possible values of the which property
A
22
Q
All mouse events include the information about pressed modifier keys?
A
YES
23
Q
Can we know about any modifier key being pressed, when using mouse events?
and why?
A
YES
because all mouse events include the information about pressed modifier keys
24
Q
What are the modifiers keys?
A
shiftKey
altKey
ctrlKey
metaKey (cmd for mac)
25
All mouse events have coordinates in 2 flavours
who are them?
window-relative: clientX and clientY
document-relative: pageX and pageY
26
When clicking on text what side-effect may be disturbing?
That a double click selects the text
If we want to handle click events ourselves, then the "extra" selection doesn´t look good.
27
Why **mouseove/mouseout** and **mouseenter/mouseleave** are special, what do they have?
the have a **relatedTarget**
28
In **mouseover**
what it means
**event.target**
**event.relatedTarget**
**event.target** - is the element where the mouse came over
**event.relatedTarget** - is the element from which the mouse came
29
In **mouseout**
what it this:
**event.target**
**event.relatedTarget**
?
**event.target** - is the element that mouse left
**event.relatedTarget** - is the new under-the-pointer element (that mouse left for)
30
**relatedTarget** can have a value of **null**?
YES
31
When and what it means that, **relatedTarget** can have a value of **null**?
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.
32
How can we explain this situation?
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!
33
What are the differences between
**mouseenter/mouseleave** and **mouseover/mouseout**
?
1 - Transitions inside the element are not counted.
2 - Events mouseenter / mouseleave do not bubble
34
What could be a problem when using **mouseenter/mouseleave**?
That they **don´t bubble**.
So we can´t use the **event delegation pattern** on them.
35
Who are the events that trigger even when we go from the parent element to a child element? and why?
mouseover / mouseout
They assume that the mouse can be only over one element at one time - the deepest one.
36
Who are the events that don´t bubble?
mouseenter / mouseleave do not bubble
37
Who are the events that only track whether the mouse comes inside and outside the element as a whole?
mouseenter / mouseleave
38
Who are the events that do not trigger when the mouse goes to a child element?
mouseenter / mouseleave
39
Who are the events that have an additional target: relatedTarget ?
mouseover / mouseout
mouseenter / mouseleave
40
Who are the events that assume that the omuse can be only over one element at one time - the deepest one?
mouseover / mouseout
41
What is the difference between **mousemove**, **mouseenter** and **mouseover**
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**.
42
When listening for the event mousemove, it means that:
every pixel leads to an event?
Explain the answer with an example
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:
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
yes
44
It is true that
## Footnote
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
yes
45
Tanto pageX/Y como clientX/Y
Son´numeros?
Si son números, que representan coordenadas
46
Tanto **pageX/Y** como **clientX/Y** sabemos que **son números**, pero **que representan** esos números?
Son coordenadas
47
Tanto **pageX/Y** como **clientX/Y** **son números**, que **representan coordenadas**, en **relación a qué**?
**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 )**
48
complete:
....... .... coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
pagex / y
49
Complete:
.......... .... coordinates are relative to the top left corner of the visible part of the page(the viewport), "seen" through browser window
clientX / Y
50
What is the viewport in HTML
**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
51
What is the difference between, clientX/Y and pageX/Y?
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
52
Describe pagex/pageY
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
53
Describe clientx/y
clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window
54
Describe the image
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.
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**?
yes
56
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?
57
If we want to track any input into an \< input \> field, keyboard events are enough?
NO, they are not enough
58
When keydown and keyup events happens?
keydown happens when a key is pressed down
keyup happens when a key is pressed up
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"**
YES
60
How can we get a character
with event.key
61
How can we get the **code** of a character?
like "KeyX"
with event.code
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
event.code will be always the same "KeyZ"
63
Every key has the .... that depends on its location on the keyboard?
Complete the word
every has the code...
64
Name the key codes for
Letters
Digits
key: KeyA, KeyB, etc...
Digit: Digit0, Digit1, etc...
65
Name the key codes for special keys like:
Enter or backspace or the tab
Enter
Backspace
Tab
66
When working with event.code, case matters?
YES
The first letter of "Key" must be upppercase
67
Witch one is responsible for telling us exactly which key was pressed?
**event.code** tells us exactly **which one was presed**, and **event.key** is responsible for **the "meaning"** of the key: what is a "shift"
68
When a key is being pressed for a long enough time, it starts to ?
repeat, keydown triggers again and again
69
For **all repeating keys** the **event object** **has what with what value**?
the **event object** has the **event.return property** set to **true**.
70
Which key never generates a keyboard event
The Fn key, there is no keyboard event for it
71
It is true that the **lifecycle** of an **HTML page** has **three important events**?
**YES**
**They are:**
DOMContentLoaded
load
beforeunload/unload
72
The lifecycle of an HTML page has how many important events?
and who are them?
**3**
**DOMContentLoaded**
**load**
**beforeunload/unload**
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?
YES
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.
YES
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?
YES
76
The **lifecycle of an HTML** page **has 3 important events.**
One of them is:
**DOMContentLoaded**
What it does?
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.**
## Footnote
**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.**
77
The **lifecycle of an HTML** page **has 3 important events.**
One of them is:
**load**
What it does?
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.
78
The **lifecycle of an HTML** page **has 3 important events.**
One of them is:
**beforeunload/unload**
What it does?
when the user is leaving the page
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!
YES
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?
YES
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?
YES
82
It is true that the **DOMContentLoaded event** could be useful for when...?
and it runs where?
**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
83
The **load event, could be useful for when?**
**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.
84
It´s true that the **beforeunload/unload** could be useful for when?
**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.
85
The DOMContentLoaded event happens where? on what object?
and we need to handler it with what?
On the document object
We need to handle it with the addEventListener method on the document object
86
To cath the DOMContentLoaded event, we need to listenting how?
with gloval events, inline, or addEventListener?
We need to use addEventListener
## Footnote
*document.addEventListener("DOMContentLoaded", ready);*
87
What is going to happen in this script
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
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?
DOMContentLoaded may only happen after all such scripts are executed.
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?
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.
90
The DOMContentLoaded event can be "paused", or will be executed in what cases?
DOMContentLoaded waits for script tags in the HTML document, and for external scripts (with src) to execute.
91
When the browser is going to continue processing without waiting for scripts?
and what is the good thing, if there is one?
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.
92
Attributes "**async**" and "**defer**" work only for .... ....?
external scripts
they are ignored if there's no ***src***
93
Talking about order in "**async**" and "**defer**"
how script with **async executes**?
Executes in the load-first order. Their document order doesn´t matter - which loads first runs first
94
Talking about order in "**async**" and "**defer**"
how script with **defer executes**?
Scripts with defer always execute in the document order (as they go in the document)
95
Talking about **external scripts** with **async** and **defer**, in relation to **order execution** **what are the differences**?
**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 )
96
Talking about **external scripts** with **async** and **defer**, in relation to the event **DOMContentLoaded**, what are the differences
**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**)**
97
**DomContentLoaded** wait for external style sheets?
**NO**, external style sheets don´t affect DOM.
98
When **DOMContentLoaded** needs to wait for stylesheets?
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.
99
It is true that Firefox, Chrome and Opera autofill forms on DOMContentLoaded?
YES
100
If DOMContentLoaded is postponed by long-loading scripts, what could happen with autofill?
autofill also waits.
101
Name one of minor benefts in using **async** and **defer** for **external scripts**?
They don´t block **DOMContentLoaded** and **don´t delay browser autofill.**
102
The **onload** event where it happens, in what object?
In the **window object**
103
The load event, where it happen, in what object?
and when it triggers?
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**
104
How can we do something when a visitor leaves the page?
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.
105
What happens when a visitor initiated leaving the page or tries to close the window?
The **window.onbeforeunload** handler can trigger, for example asking for additional confirmation. It needs to return the string with a question.
## Footnote
***window.onbeforeunload = function() {***
**return "There are unsaved changes. leave now?;**
**};**
106
When triggering the handler **window.onbeforeunload**, what some browsers will do?
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.
107
What happens if we set the **DOMContentLoaded** handler after the document is loaded?
## Footnote
**and why?**
**Naturally, it never runs!**
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?**
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.
109
It is true that the **document.readyState property** gives us information about the **current state of the document**?
**YES**
110
How many possible values have the **property document.readyState**?
3 possible values
111
So the **document.readyState property** gives us **3 possible values** to know the **current state of the document**.
## Footnote
**Name them?**
**loading**
**interactive**
**complete**
112
**How many values** gives us the property **document.readyState**, and
## Footnote
**what are their name/s?**
**And what is the purpose of this property?**
It has 3 possible values
loading, interactive, complete
It purpose it's to give us information about the current state of the document.
113
What it means the "**loading**" state of the **document.readyState property**?
The document is loading
114
What it means the "**interactive**" state of the **document.readyState property?**
interactive: the document was fully read
115
What it means the "**complete**" state of the **document.readyState property?**
complete: The document was fully read and all resources (like images) are loaded too.
116
We know that we can check the current state of the document,
## Footnote
**how can we do it?**
**Can we set up a handler or execute a code immediately if it's ready?**
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
117
What event is the one that triggers when the state of the document change?
the readystatechange event
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...**
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
119
How many stages of a page load exists?
3 stages
120
Describe the Stage 1 of a page load?
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.
121
Describe the Stage 2 of a page load?
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
122
Describe the stage 3 of a page load?
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
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
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.
124
Why **load** and **DOMContentLoaded events** are important?
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.
125
How can we be sure that our code runs before the DOM is ready?
Listening for the **DOMContentLoaded event** and let all of the **code that relies on the DOM** to **run only after** that event is overheard.
126
It is true that **script elements position in the DOM** affects when they run?
and why?
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
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?
The script/s **will not have access to any DOM elements** that have **not yet been parsed**
128
How can we avoid the whole process of listening to DOMContentLoaded event?
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.
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
YES
130
async and defer, who is the one that will run in order?
async NOT run in order
defer YES it will run in order
131
If we have several scripts markes as **async** how they will run?
They will **NOT** run in order.
They will run in a order **DIFFERENT** than what they were specified in your markup
132
Scripts marked with defer run in thr order which they were defined?
YES
133
Scripts marked with **defer attribute** when do they get executed, **before or after DOMContentLoaded** event gets fired?
**before** the **DOMContentLoaded** event gets fired
134
Take a second and tell the order in which these scripts will run?
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.
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?
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.
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?
YES
YES
137
1) Document forms are members of what special collection?
2) how can we get the form?
1) document.forms
2) We can use the name and the number to get the form
138
When we have the form, any element is available in the named collection: form.elements?
YES
139
When we have a form, hown can we get the elements?
Any element is available in the named collection: form.elements.
140
What happens to form.elements if there are multiple elements with the same name ex: radio buttons
form.elements[name] is a collection
141
When working with forms, the navigation properties as document.form, form.elements, etc... depende on the tag structure? and why?
NO, all elements, no matter how deep they are in the form, are available in form.elements.
142
on a form, fieldsets support the *elements* property?
YES
143
When working with forms, what is the shorter notation for accessing elements, insetad of ***form.elements.login***
The shorter notation is ***form[index/name]***
## Footnote
***form.login***
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.
YES
145
Exist a ***backreference*** when working with elements on a form, between a form and their elements? explain it?
YES
For any element, the form is avaiable as ***element.form***. So a form references all elements, and elements reference the form.
146
How can we access the value of an ***input*** or for example a ***checkbox***?
We can access the values as
## Footnote
***input.value***
***input.checked***
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?
YES
148
It is true that the ***HTML attribute autofocus*** puts the focus into an element by default when a page loads.
YES
149
What are the possibles ways that elements can receive **focus**
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.
150
What it means ***Focusing?***
It means: **"prepare to accept the data here"**
151
loosing ***focus ("blur")*** when it could happend?
When a user clicks somewhere else or presses **Tab** to go to the next **form field**, or there are other means as well.
152
loosing the **focus** generally means? and what could we do when **loosing focus**
"The data has been entered"
we can run the code to check it or even to save it to the server and so on.
153
What is the purpose of using JS when **focus/blur** if **moderl HTML** allows validations using input attributes like: ***required, pattern, etc***
JS can be used when we want more flexibility, we could automatically send the changed value to the server if it's correct.
154
What it does the methods:
## Footnote
**elem.focus()**
**elem.blur()**
**.focus()** - it sets the focus on the element
**.blur()** - unset the focus on the element
155
What this code will do?
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.**
156
Javascript can cause "**focus loss" ?**
## Footnote
**explain it**
**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.
157
Hown can an **alert box** cause a **focus loss**?
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)**
158
If an element is removed from the DOM, it causes focus loss? explain it?
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.
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**?
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.
160
All elements support focusing? explain it
NO
elements that exist to format something like div, span, table, **are unfocusable by default**
161
**focus/blur** support is guaranteed for elements that ... ?
elements that visitors can interact with: button, input, select, a, etc...
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**
using the **HTML attribute tabindex**
163
What is the purpose of the HTML attribute
## Footnote
**tabindex**
To specify the **order number** of the element when **Tab** is used to switch between them.
164
the **HTML attribute** tabindex has how many special values, and what they do?
2 special values
***tabindex="0"*** - makes the element the last one
***tabindex="1"*** - means that Tab should ignore that element.
165
Any element that has the **tabindex html attribute** can be **focused**?
YES
166
What is the order of focusing on pressing tab
The order is like this:
1, 2, 0 (zero is always the last). Normally li does not support focusing, but **tabindex** full enables it
167
Can we add the **tabindex html attribute**, via JS?
if yes, how?
YES
We can add tabindex from JS by using the **elem.tabIndex** property.
168
**focus** and **blur**, make use of the capturing of bubbling phase
capturing phase
169
What is going to happend on this code:
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
170
What will happend on this code, this will work?
Yes it work, because focus/blur do not bubble up, but propagate down on the capturing phase.
171
Since **focus/blur** do not bubble, what other similar events do we have that bubble up?
**focusin** and **focusout**
They **must be assigned** with the method addEventListener, **not on on
172
This will work?
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
173
It is true that the **change event** triggers when the element has finished changing?
YES
174
When the change event is going to trigger?
example for:
**inputs, select, input type=checkbox/radio**
The event occurs
**inputs**: means that the event occurs when it looses focus
**select, input type=checkbox/radio** - triggers right after the selection changes
175
It is true that the **input event** triggers every time a value is modified?
YES
176
When the **input event** triggers?
every time a value is modified
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
the **input event**
It works on any value change, even those that doesn´t involve keyboard actions.
