1.4 - Events in Detail Flashcards
Mouse events can be splitted into 2 categories, simple and complex, it is right?
YES
Mouse events can be split into how many categories? and who are them
2 categories
simple and complex
Describe some of the most used simple mouse envents
mousedown / mouseup
mouseover / mouseout
mousemove
Some of the most used mouse simple events are:
mousedown / mouseup
mouseover / mouseout
mousemove
YES
mousedown / mouseup
Describe it
In what category is it?
description: mouse button is clicked / released over an element
category: simple
mouseover / mouseout
Describe it
In what category is it?
description: mouse pointer comes over / out from an element
category: simple
mousemove
Describe it
In what category is it?
describe: every mouse move over an elemen triggers that event
category: simple
some of the most used complex mouse events are
click
contextmenu
dblclick
?
yes
some of the most used complex events are?
click
contextmenu
dblclick
complex events are made of simple ones?
yes
Complex events are made of …?
simple ones
click event
Describe it
In what category is it?
description: triggers after mousedown and then mouseup is released over the same element
category: complex
contextmenu event
Describe it
In what category is it?
description: triggers after mousedown if the right mouse button was used
category: complex
dblclick
Describe it
In what category is it?
description: triggers after a double click over an element.
category: complex
Can an action trigger multiple events?
explain it with an example
YES
a click first triggers mousedown, when the button is pressed, then mouseup and click when it’s released
How is the events order in the case when a single action initiates multiple events?
describe the click event
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
The which property is:
allows to get the mouse button ?
YES
What is the usage or purpose of the which property on click-related events?
Click related events always have the which property that allows to get the button
The which property it’s used for click and contextmenu events?
No, because those happens only on left click and on right click only
When it is usefull the which property on click related events?
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”
Name the possible values of the which property
All mouse events include the information about pressed modifier keys?
YES
Can we know about any modifier key being pressed, when using mouse events?
and why?
YES
because all mouse events include the information about pressed modifier keys
What are the modifiers keys?
shiftKey
altKey
ctrlKey
metaKey (cmd for mac)
All mouse events have coordinates in 2 flavours
who are them?
window-relative: clientX and clientY
document-relative: pageX and pageY
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.
Why mouseove/mouseout and mouseenter/mouseleave are special, what do they have?
the have a relatedTarget
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
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)
relatedTarget can have a value of null?
YES
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.
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!
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
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.
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.
Who are the events that don´t bubble?
mouseenter / mouseleave do not bubble
Who are the events that only track whether the mouse comes inside and outside the element as a whole?
mouseenter / mouseleave
Who are the events that do not trigger when the mouse goes to a child element?
mouseenter / mouseleave
Who are the events that have an additional target: relatedTarget ?
mouseover / mouseout
mouseenter / mouseleave
Who are the events that assume that the omuse can be only over one element at one time - the deepest one?
mouseover / mouseout
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.
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:
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
It is true that
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
yes
Tanto pageX/Y como clientX/Y
Son´numeros?
Si son números, que representan coordenadas
Tanto pageX/Y como clientX/Y sabemos que son números, pero que representan esos números?
Son coordenadas
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 )
complete:
……. …. coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
pagex / y
Complete:
………. …. coordinates are relative to the top left corner of the visible part of the page(the viewport), “seen” through browser window
clientX / Y
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
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
Describe pagex/pageY
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
Describe clientx/y
clientX/Y coordinates are relative to the top left corner of the visible part of the page, “seen” through browser window
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.
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
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?
If we want to track any input into an < input > field, keyboard events are enough?
NO, they are not enough
When keydown and keyup events happens?
keydown happens when a key is pressed down
keyup happens when a key is pressed up
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
How can we get a character
with event.key
How can we get the code of a character?
like “KeyX”
with event.code
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”
Every key has the …. that depends on its location on the keyboard?
Complete the word
every has the code…
Name the key codes for
Letters
Digits
key: KeyA, KeyB, etc…
Digit: Digit0, Digit1, etc…
Name the key codes for special keys like:
Enter or backspace or the tab
Enter
Backspace
Tab
When working with event.code, case matters?
YES
The first letter of “Key” must be upppercase
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”
When a key is being pressed for a long enough time, it starts to ?
repeat, keydown triggers again and again
For all repeating keys the event object has what with what value?
the event object has the event.return property set to true.
Which key never generates a keyboard event
The Fn key, there is no keyboard event for it
It is true that the lifecycle of an HTML page has three important events?
YES
They are:
DOMContentLoaded
load
beforeunload/unload
The lifecycle of an HTML page has how many important events?
and who are them?
3
DOMContentLoaded
load
beforeunload/unload
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
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
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
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.
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.
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.
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
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
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
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
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
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.
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.
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
To cath the DOMContentLoaded event, we need to listenting how?
with gloval events, inline, or addEventListener?
We need to use addEventListener
document.addEventListener(“DOMContentLoaded”, ready);
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
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.
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.
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.
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.
Attributes “async” and “defer” work only for …. ….?
external scripts
they are ignored if there’s no src
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
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)
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 )
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)
DomContentLoaded wait for external style sheets?
NO, external style sheets don´t affect DOM.
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.
It is true that Firefox, Chrome and Opera autofill forms on DOMContentLoaded?
YES
If DOMContentLoaded is postponed by long-loading scripts, what could happen with autofill?
autofill also waits.
Name one of minor benefts in using async and defer for external scripts?
They don´t block DOMContentLoaded and don´t delay browser autofill.
The onload event where it happens, in what object?
In the window object
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
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.
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.
window.onbeforeunload = function() {
return “There are unsaved changes. leave now?;
};
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.
What happens if we set the DOMContentLoaded handler after the document is loaded?
and why?
Naturally, it never runs!
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.
It is true that the document.readyState property gives us information about the current state of the document?
YES
How many possible values have the property document.readyState?
3 possible values
So the document.readyState property gives us 3 possible values to know the current state of the document.
Name them?
loading
interactive
complete
How many values gives us the property document.readyState, and
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.
What it means the “loading” state of the document.readyState property?
The document is loading
What it means the “interactive” state of the document.readyState property?
interactive: the document was fully read
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.
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?
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
What event is the one that triggers when the state of the document change?
the readystatechange event
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
How many stages of a page load exists?
3 stages
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.
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
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
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.
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.
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.
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
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
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.
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
async and defer, who is the one that will run in order?
async NOT run in order
defer YES it will run in order
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
Scripts marked with defer run in thr order which they were defined?
YES
Scripts marked with defer attribute when do they get executed, before or after DOMContentLoaded event gets fired?
before the DOMContentLoaded event gets fired
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.
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.
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
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
When we have the form, any element is available in the named collection: form.elements?
YES
When we have a form, hown can we get the elements?
Any element is available in the named collection: form.elements.
What happens to form.elements if there are multiple elements with the same name ex: radio buttons
form.elements[name] is a collection
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.
on a form, fieldsets support the elements property?
YES
When working with forms, what is the shorter notation for accessing elements, insetad of form.elements.login
The shorter notation is form[index/name]
form.login
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
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.
How can we access the value of an input or for example a checkbox?
We can access the values as
input.value
input.checked
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
It is true that the HTML attribute autofocus puts the focus into an element by default when a page loads.
YES
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.
What it means Focusing?
It means: “prepare to accept the data here”
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.
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.
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.
What it does the methods:
elem.focus()
elem.blur()
.focus() - it sets the focus on the element
.blur() - unset the focus on the element
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.
Javascript can cause “focus loss” ?
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.
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)
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.
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.
All elements support focusing? explain it
NO
elements that exist to format something like div, span, table, are unfocusable by default
focus/blur support is guaranteed for elements that … ?
elements that visitors can interact with: button, input, select, a, etc…
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
What is the purpose of the HTML attribute
tabindex
To specify the order number of the element when Tab is used to switch between them.
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.
Any element that has the tabindex html attribute can be focused?
YES
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
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.
focus and blur, make use of the capturing of bubbling phase
capturing phase
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
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.
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<event></event>
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
It is true that the change event triggers when the element has finished changing?
YES
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
It is true that the input event triggers every time a value is modified?
YES
When the input event triggers?
every time a value is modified
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.
