From 592b5d86553b5ca2496a6b4753ac89d8b068b69b Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Wed, 3 Feb 2021 00:40:13 +0100 Subject: [PATCH 01/16] Dispatching custom events --- 2-ui/2-events/05-dispatch-events/article.md | 180 ++++++++++---------- 1 file changed, 89 insertions(+), 91 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index b38719f85..23c23557f 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -1,40 +1,40 @@ -# Dispatching custom events +# Dispatching di eventi personalizzati -We can not only assign handlers, but also generate events from JavaScript. +Oltre ad assegnare gestori, possiamo anche generare eventi attraverso JavaScript. -Custom events can be used to create "graphical components". For instance, a root element of our own JS-based menu may trigger events telling what happens with the menu: `open` (menu open), `select` (an item is selected) and so on. Another code may listen for the events and observe what's happening with the menu. +Gli eventi personalizzati (custom events) possono essere usati per creare "componenti grafici". Ad esempio un elemento radice del nostro menù basato su JavaScript, può innescare degli eventi che indicano cosa avviene nel menù: `open` (se il menù è aperto), `select` (se c'è un elemento selezionato) e così via. Del codice in altre aree, potrebbe mettersi in ascolto per questi eventi e tenere traccia di cosa sta avvenendo nel menù. -We can generate not only completely new events, that we invent for our own purposes, but also built-in ones, such as `click`, `mousedown` etc. That may be helpful for automated testing. +Possiamo generare non solo eventi del tutto nuovi, creati apposta per i nostri scopi, ma anche quelli predefiniti del linguaggio, come `click`, `mousedown` etc. Questo può essere utile per dei testi automatici. -## Event constructor +## Costruttore dell'evento -Built-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class. +Le classi degli eventi predefiniti formano una gerarchia, similmente alle classi degli elementi del DOM. La classe base è [Event](http://www.w3.org/TR/dom/#event). -We can create `Event` objects like this: +Gli oggetti `Event` vengono creati così: ```js let event = new Event(type[, options]); ``` -Arguments: +Argomenti: -- *type* -- event type, a string like `"click"` or our own like `"my-event"`. -- *options* -- the object with two optional properties: - - `bubbles: true/false` -- if `true`, then the event bubbles. - - `cancelable: true/false` -- if `true`, then the "default action" may be prevented. Later we'll see what it means for custom events. +- *type* -- tipo dell'evento, una stringa come `"click"` oppure una personale come `"mio-evento"`. +- *options* -- l'oggetto con due proprietà opzionali: + - `bubbles: true/false` -- se `true`, l'evento sarà soggetto a bubbling. + - `cancelable: true/false` -- se `true`, "l'azione predefinita" può essere impedita. Successivamente vedremo cosa questo significhi per gli eventi personalizzati. - By default both are false: `{bubbles: false, cancelable: false}`. + Di default sono entrambi impostati a false: `{bubbles: false, cancelable: false}`. ## dispatchEvent -After an event object is created, we should "run" it on an element using the call `elem.dispatchEvent(event)`. +Dopo la creazione di un evento, dovremmo "eseguirlo" su un elemento, attraverso la chiamata `elem.dispatchEvent(event)`. -Then handlers react on it as if it were a regular browser event. If the event was created with the `bubbles` flag, then it bubbles. +A questo punto, il gestore reagisce su di esso come se fosse un evento del browser normale. Se l'evento è stato creato con l'opzione `bubbles` attivata, allora procederà con il bubbling. -In the example below the `click` event is initiated in JavaScript. The handler works same way as if the button was clicked: +Nel seguente esempio, l'evento `click` viene inizializzato attraverso JavaScript. Il gestore si comporta esattamente come se il pulsante fosse stato cliccato: ```html run no-beautify - + ``` -Notes: +Note: -1. We should use `addEventListener` for our custom events, because `on` only exists for built-in events, `document.onhello` doesn't work. -2. Must set `bubbles:true`, otherwise the event won't bubble up. +1. Per i nostri eventi personalizzati dobbiamo usare `addEventListener`, in quanto `on` esiste solo per quelli predefiniti: `document.onhello` non funziona. +2. Dobbiamo impostare `bubbles:true`, altrimenti l'evento non risalirà attraverso i nodi genitori. -The bubbling mechanics is the same for built-in (`click`) and custom (`hello`) events. There are also capturing and bubbling stages. +La meccanica del bubbling è la stessa per gli eventi predefiniti (`click`) e personalizzati (`hello`), comprese anche le fasi di capturing e bubbling. -## MouseEvent, KeyboardEvent and others +## MouseEvent, KeyboardEvent e altri -Here's a short list of classes for UI Events from the [UI Event specification](https://www.w3.org/TR/uievents): +Ecco una breve lista di classi per gli eventi della UI estratta dalla [UI Event specification](https://www.w3.org/TR/uievents): - `UIEvent` - `FocusEvent` @@ -91,11 +91,11 @@ Here's a short list of classes for UI Events from the [UI Event specification](h - `KeyboardEvent` - ... -We should use them instead of `new Event` if we want to create such events. For instance, `new MouseEvent("click")`. +Dovremmo usare queste anziché `new Event` se vogliamo creare questo tipo di eventi. Ad esempio, `new MouseEvent("click")`. -The right constructor allows to specify standard properties for that type of event. +Il costruttore adatto ci permette di specificare delle proprietà standard per questo tipo di evento. -Like `clientX/clientY` for a mouse event: +Come ad esempio `clientX/clientY` per gli eventi del mouse: ```js run let event = new MouseEvent("click", { @@ -110,9 +110,7 @@ alert(event.clientX); // 100 */!* ``` -Please note: the generic `Event` constructor does not allow that. - -Let's try: +Nota bene: il costruttore generico `Event` non permette di fare quanto appena descritto: ```js run let event = new Event("click", { @@ -123,58 +121,58 @@ let event = new Event("click", { }); *!* -alert(event.clientX); // undefined, the unknown property is ignored! +alert(event.clientX); // undefined, la proprietà sconosciuta viene ignorata! */!* ``` -Technically, we can work around that by assigning directly `event.clientX=100` after creation. So that's a matter of convenience and following the rules. Browser-generated events always have the right type. +Tecnicamente, possiamo aggirare il problema assegnandogli direttamente `event.clientX=100` dopo la creazione. Ma è una questione di comodità oltre che di aderenza alle regole. Gli eventi generati dal browser garantiscono sempre di avere sempre il tipo corretto. -The full list of properties for different UI events is in the specification, for instance, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). +La lista completa delle proprietà, per i vari venti della UI sono descritti nelle specifiche, ad esempio, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). -## Custom events +## Eventi personalizzati (custom events) -For our own, completely new events types like `"hello"` we should use `new CustomEvent`. Technically [CustomEvent](https://dom.spec.whatwg.org/#customevent) is the same as `Event`, with one exception. +Per i nostri nuovi eventi come `"hello"` dovremmo usare `new CustomEvent`. Tecnicamente [CustomEvent](https://dom.spec.whatwg.org/#customevent) è equivalente a `Event`, senza eccezioni. -In the second argument (object) we can add an additional property `detail` for any custom information that we want to pass with the event. +Nel secondo argomento (object) possiamo aggiungere la proprietà aggiuntiva `detail` per qualunque informazione personalizzata che vogliamo passare insieme all'evento. -For instance: +Esempio: ```html run refresh -

Hello for John!

+

Ciao a Giovanni!

``` -The `detail` property can have any data. Technically we could live without, because we can assign any properties into a regular `new Event` object after its creation. But `CustomEvent` provides the special `detail` field for it to evade conflicts with other event properties. +La proprietà `detail` può contenere qualunque tipo di dato. Tecnicamente si potrebbe farne a meno, dato che possiamo assegnare qualunque proprietà dentro un normalissimo oggetto `new Event`, dopo la sua creazione. Ma `CustomEvent` fornisce il campo speciale `detail` adatto allo scopo, con cui ci si assicura di evitare conflitti con le altre proprietà dell'evento. -Besides, the event class describes "what kind of event" it is, and if the event is custom, then we should use `CustomEvent` just to be clear about what it is. +Oltretutto, la classe evento descrive "che tipo di evento" sia, e se si tratta di un evento personalizzato, allora possiamo usare `CustomEvent` anche solo per palesare di cosa si tratti. ## event.preventDefault() -Many browser events have a "default action", such as navigating to a link, starting a selection, and so on. +Molti browser hanno una "azione predefinita", come una navigazione verso un link, l'inizio di una selezione, e così via. -For new, custom events, there are definitely no default browser actions, but a code that dispatches such event may have its own plans what to do after triggering the event. +Gli eventi personalizzati, invece, ne sono sprovvisti, ma di sicuro il codice che li genera, ha dei piani ben definiti circa il da farsi dopo che questo tipo di eventi sia stato generato. -By calling `event.preventDefault()`, an event handler may send a signal that those actions should be canceled. +Chiamando `event.preventDefault()`, un gestore è in grado di inviare un segnale che queste azioni devono essere annullate. -In that case the call to `elem.dispatchEvent(event)` returns `false`. And the code that dispatched it knows that it shouldn't continue. +In questo caso la chiamata a `elem.dispatchEvent(event)` restituisce `false`, ed il codice che lo ha generato sa che non deve continuare. -Let's see a practical example - a hiding rabbit (could be a closing menu or something else). +Vediamo un pratico esempio: un coniglio che si nasconde (potrebbe essere un menù collassabile o qualcos'altro). -Below you can see a `#rabbit` and `hide()` function that dispatches `"hide"` event on it, to let all interested parties know that the rabbit is going to hide. +Nell'esempio possiamo vedere un `#rabbit` e una funzione `hide()` che invia un evento `"hide"` su di esso, per informare tutte le parti interessate che il coniglio sta per nascondersi. -Any handler can listen for that event with `rabbit.addEventListener('hide',...)` and, if needed, cancel the action using `event.preventDefault()`. Then the rabbit won't disappear: +Qualunque gestore può mettersi in ascolto per questo evento tramite `rabbit.addEventListener('hide',...)` e, se necessario, annullare l'azione con `event.preventDefault()`. In questo modo il coniglio non scomparirà: ```html run refresh autorun 
@@ -184,15 +182,15 @@ Any handler can listen for that event with `rabbit.addEventListener('hide',...)`
   =\_Y_/=
    {>o<}
- + ``` -Please note: the event must have the flag `cancelable: true`, otherwise the call `event.preventDefault()` is ignored. +Nota bene: l'evento deve avere il flag `cancelable: true`, altrimenti la chiamata `event.preventDefault()` verrà ignorata. -## Events-in-events are synchronous +## Gli eventi negli eventi sono sincroni -Usually events are processed in a queue. That is: if the browser is processing `onclick` and a new event occurs, e.g. mouse moved, then it's handling is queued up, corresponding `mousemove` handlers will be called after `onclick` processing is finished. +Solitamente gli eventi vengono elaborati in una coda. Ossia: se il browser sta elaborando `onclick` e viene generato un nuovo evento, ad esempio il mouse viene mosso, il suo gestore verrà messo in coda, ed i corrispondenti gestori di `mousemove` verranno chiamati dopo che l'elaborazione di `onclick` sarà terminata. -The notable exception is when one event is initiated from within another one, e.g. using `dispatchEvent`. Such events are processed immediately: the new event handlers are called, and then the current event handling is resumed. +L'eccezione degna di nota è quando un evento viene inizializzato all'interno di un altro, ad esempio usando `dispatchEvent`. Questi eventi vengono elaborati immediatamente: i gestori del nuovo evento vengono chiamati, e successivamente viene ristabilita la gestione dell'evento corrente. -For instance, in the code below the `menu-open` event is triggered during the `onclick`. +Per esempio, nel codice seguente l'evento `menu-open` viene innescato durante `onclick`. -It's processed immediately, without waiting for `onclick` handler to end: +Viene processato immediatamente, senza attendere che il gestore di `onclick` abbia terminato: ```html run autorun - + ``` -The output order is: 1 -> nested -> 2. +L'ordine di output è: 1 -> annidato -> 2. -Please note that the nested event `menu-open` is caught on the `document`. The propagation and handling of the nested event is finished before the processing gets back to the outer code (`onclick`). +Nota bene che l'evento annidato `menu-open` viene catturato nel `document`. La propagazione e la gestione dell'evento annidato vengono eseguiti e completati prima che l'elaborazione torni al codice esterno (`onclick`). -That's not only about `dispatchEvent`, there are other cases. If an event handler calls methods that trigger other events -- they are processed synchronously too, in a nested fashion. +Questo non vale solo per `dispatchEvent`, ma esistono altri casi. Se un gestore di evento chiama metodi che innescano altri eventi -- anche questi vengono elaborati in maniera sincrona, in modo annidato. -Let's say we don't like it. We'd want `onclick` to be fully processed first, independently from `menu-open` or any other nested events. +Ora mettiamo il caso che questa cosa non ci stia bene, e che invece volessimo che `onclick` venisse elaborato per primo, indipendentemente da `menu-open` o prima di qualunque altro evento interno. -Then we can either put the `dispatchEvent` (or another event-triggering call) at the end of `onclick` or, maybe better, wrap it in the zero-delay `setTimeout`: +Allora potremmo sia inserire `dispatchEvent` (o un altra chiamata che generi un evento) alla fine di `onclick` o, forse anche meglio, avvolgerlo in un `setTimeout` a ritardo zero: ```html run - + ``` -Now `dispatchEvent` runs asynchronously after the current code execution is finished, including `menu.onclick`, so event handlers are totally separate. +Adesso `dispatchEvent` viene eseguito in maniera asincrona, dopo che l'esecuzione del codice corrente è terminata, incluso `menu.onclick`, ed in questo modo i gestori sono totalmente separati. -The output order becomes: 1 -> 2 -> nested. +L'ordine di output diventa: 1 -> 2 -> annidato. -## Summary +## Riepilogo -To generate an event from code, we first need to create an event object. +Per generare un evento dal codice, dobbiamo prima di tutto, creare un oggetto evento. -The generic `Event(name, options)` constructor accepts an arbitrary event name and the `options` object with two properties: -- `bubbles: true` if the event should bubble. -- `cancelable: true` if the `event.preventDefault()` should work. +Il costruttore generico `Event(name, options)` accetta un nome di evento arbitrario e un oggetto `options`, con due proprietà: +- `bubbles: true` se l'evento deve fare bubbling. +- `cancelable: true` se `event.preventDefault()` deve poter funzionare. -Other constructors of native events like `MouseEvent`, `KeyboardEvent` and so on accept properties specific to that event type. For instance, `clientX` for mouse events. +Altri costruttori di eventi nativi come `MouseEvent`, `KeyboardEvent` e così via, accettano proprietà specifiche per quel tipo di evento. Ad esempio, `clientX` per glie eventi del mouse. -For custom events we should use `CustomEvent` constructor. It has an additional option named `detail`, we should assign the event-specific data to it. Then all handlers can access it as `event.detail`. +Per eventi personalizzati dovremmo usare il costruttore `CustomEvent`, il quale ha una opzione aggiuntiva chiamata `detail`, per potervi assegnare i dati specifici del tipo di evento, ai quali i gestori potranno accedere tramite `event.detail`. -Despite the technical possibility of generating browser events like `click` or `keydown`, we should use them with great care. +Nonostante tecnicamente esista la possibilità di generare eventi del browser come `click` o `keydown`, dovremmo usarli con molta attenzione. -We shouldn't generate browser events as it's a hacky way to run handlers. That's bad architecture most of the time. +Non dovremmo generare eventi del browser perché una pratica poco elegante e sporca nell'esecuzione dei gestori. La maggior parte delle volte, si tratta di cattiva architettura. -Native events might be generated: +Gi eventi nativi possono essere generati quando: -- As a dirty hack to make 3rd-party libraries work the needed way, if they don't provide other means of interaction. -- For automated testing, to "click the button" in the script and see if the interface reacts correctly. +- Come un modo poco pulito per far sì che delle librerie di terze parti lavorino nella maniera voluta, se queste non forniscono altri modi con cui poter interagire. +- Per test automatici, per "cliccare il pulsante" nello script e vedere se l'interfaccia risponde correttamente. -Custom events with our own names are often generated for architectural purposes, to signal what happens inside our menus, sliders, carousels etc. +Gli eventi personalizzati di nostra creazione, vengono spesso generati per scopi architetturali, per segnalare cosa succede dentro i nostri menù, sliders, caroselli, etc. \ No newline at end of file From 7bfbc4813817aba01ecb6a06b1e80baa37a5d139 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:41:53 +0100 Subject: [PATCH 02/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 23c23557f..63beea2f9 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -2,7 +2,7 @@ Oltre ad assegnare gestori, possiamo anche generare eventi attraverso JavaScript. -Gli eventi personalizzati (custom events) possono essere usati per creare "componenti grafici". Ad esempio un elemento radice del nostro menù basato su JavaScript, può innescare degli eventi che indicano cosa avviene nel menù: `open` (se il menù è aperto), `select` (se c'è un elemento selezionato) e così via. Del codice in altre aree, potrebbe mettersi in ascolto per questi eventi e tenere traccia di cosa sta avvenendo nel menù. +Gli eventi personalizzati (custom events) possono essere usati per creare "componenti grafici". Ad esempio un elemento radice del nostro menù basato su JavaScript, potrebbe innescare eventi che indicano al menù come comportarsi: `open` (aprire il menu), `select` (selezionare un elemento) e così via. Del codice in altre aree, potrebbe mettersi in ascolto per questi eventi e tenere traccia di cosa sta avvenendo nel menù. Possiamo generare non solo eventi del tutto nuovi, creati apposta per i nostri scopi, ma anche quelli predefiniti del linguaggio, come `click`, `mousedown` etc. Questo può essere utile per dei testi automatici. @@ -289,4 +289,4 @@ Gi eventi nativi possono essere generati quando: - Come un modo poco pulito per far sì che delle librerie di terze parti lavorino nella maniera voluta, se queste non forniscono altri modi con cui poter interagire. - Per test automatici, per "cliccare il pulsante" nello script e vedere se l'interfaccia risponde correttamente. -Gli eventi personalizzati di nostra creazione, vengono spesso generati per scopi architetturali, per segnalare cosa succede dentro i nostri menù, sliders, caroselli, etc. \ No newline at end of file +Gli eventi personalizzati di nostra creazione, vengono spesso generati per scopi architetturali, per segnalare cosa succede dentro i nostri menù, sliders, caroselli, etc. From c106ed0d59e54a0253c1522213b4ac5fb5dc9189 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:42:02 +0100 Subject: [PATCH 03/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 63beea2f9..d94bd5bc9 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -4,7 +4,7 @@ Oltre ad assegnare gestori, possiamo anche generare eventi attraverso JavaScript Gli eventi personalizzati (custom events) possono essere usati per creare "componenti grafici". Ad esempio un elemento radice del nostro menù basato su JavaScript, potrebbe innescare eventi che indicano al menù come comportarsi: `open` (aprire il menu), `select` (selezionare un elemento) e così via. Del codice in altre aree, potrebbe mettersi in ascolto per questi eventi e tenere traccia di cosa sta avvenendo nel menù. -Possiamo generare non solo eventi del tutto nuovi, creati apposta per i nostri scopi, ma anche quelli predefiniti del linguaggio, come `click`, `mousedown` etc. Questo può essere utile per dei testi automatici. +Possiamo generare non solo eventi del tutto nuovi, creati apposta per i nostri scopi, ma anche quelli predefiniti del linguaggio, come `click`, `mousedown` etc. Questo può essere utile per i test automatici. ## Costruttore dell'evento From b11fbf0e5ce4c484f992816335cfcc99cf5a7f30 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:42:40 +0100 Subject: [PATCH 04/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index d94bd5bc9..2b6668420 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -18,7 +18,7 @@ let event = new Event(type[, options]); Argomenti: -- *type* -- tipo dell'evento, una stringa come `"click"` oppure una personale come `"mio-evento"`. +- *type* -- tipo dell'evento, una stringa come `"click"` oppure una personalizzata come `"mio-evento"`. - *options* -- l'oggetto con due proprietà opzionali: - `bubbles: true/false` -- se `true`, l'evento sarà soggetto a bubbling. - `cancelable: true/false` -- se `true`, "l'azione predefinita" può essere impedita. Successivamente vedremo cosa questo significhi per gli eventi personalizzati. From 42f2a2ff1f6ea32a020515529d22f09a012ec46a Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:42:51 +0100 Subject: [PATCH 05/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 2b6668420..177e6ef20 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -43,7 +43,7 @@ Nel seguente esempio, l'evento `click` viene inizializzato attraverso JavaScript ``` ```smart header="event.isTrusted" -Per poter distinguere un evento generato da un utente "reale", da una generato da script esiste un modo. +Per poter distinguere un evento generato da un utente "reale", da uno generato da script esiste un modo. La proprietà `event.isTrusted` sarà `true` per eventi che provengono da azioni reali dell'utente e `false` per quelli generati da script. ``` From d245888ea62ac35d1a6b2c3c9bbef949bef45511 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:43:07 +0100 Subject: [PATCH 06/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 177e6ef20..75fe5cc55 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -75,7 +75,7 @@ Tutto quello che dobbiamo fare è impostare `bubbles` a `true`: Note: -1. Per i nostri eventi personalizzati dobbiamo usare `addEventListener`, in quanto `on` esiste solo per quelli predefiniti: `document.onhello` non funziona. +1. Per i nostri eventi personalizzati dobbiamo usare `addEventListener`, in quanto `on` esiste solo per quelli predefiniti: quindi `document.onhello` non funzionerà. 2. Dobbiamo impostare `bubbles:true`, altrimenti l'evento non risalirà attraverso i nodi genitori. La meccanica del bubbling è la stessa per gli eventi predefiniti (`click`) e personalizzati (`hello`), comprese anche le fasi di capturing e bubbling. From b67ae4f3f013e971a2d87c10dc3409599cebd59c Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:43:17 +0100 Subject: [PATCH 07/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 75fe5cc55..1a5008fb8 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -125,7 +125,7 @@ alert(event.clientX); // undefined, la proprietà sconosciuta viene ignorata! */!* ``` -Tecnicamente, possiamo aggirare il problema assegnandogli direttamente `event.clientX=100` dopo la creazione. Ma è una questione di comodità oltre che di aderenza alle regole. Gli eventi generati dal browser garantiscono sempre di avere sempre il tipo corretto. +Tecnicamente, possiamo aggirare il problema assegnandogli direttamente `event.clientX=100` dopo la creazione. Ma è una questione di comodità oltre che di aderenza alle regole. Gli eventi generati dal browser garantiscono sempre di avere il tipo corretto. La lista completa delle proprietà, per i vari venti della UI sono descritti nelle specifiche, ad esempio, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). From c578a105ba6ee4a09e0b71ad3bdea24b3dff55e8 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:43:23 +0100 Subject: [PATCH 08/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 1a5008fb8..e15c60c9d 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -127,7 +127,7 @@ alert(event.clientX); // undefined, la proprietà sconosciuta viene ignorata! Tecnicamente, possiamo aggirare il problema assegnandogli direttamente `event.clientX=100` dopo la creazione. Ma è una questione di comodità oltre che di aderenza alle regole. Gli eventi generati dal browser garantiscono sempre di avere il tipo corretto. -La lista completa delle proprietà, per i vari venti della UI sono descritti nelle specifiche, ad esempio, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). +La lista completa delle proprietà, per i vari eventi della UI sono descritti nelle specifiche, ad esempio, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent). ## Eventi personalizzati (custom events) From 08bee84212bc586c0e3ed369d0cdfd9ad260a7d8 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:43:32 +0100 Subject: [PATCH 09/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index e15c60c9d..26f5f21b3 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -206,7 +206,7 @@ Qualunque gestore può mettersi in ascolto per questo evento tramite `rabbit.add Nota bene: l'evento deve avere il flag `cancelable: true`, altrimenti la chiamata `event.preventDefault()` verrà ignorata. -## Gli eventi negli eventi sono sincroni +## Gli eventi annidati sono sincroni Solitamente gli eventi vengono elaborati in una coda. Ossia: se il browser sta elaborando `onclick` e viene generato un nuovo evento, ad esempio il mouse viene mosso, il suo gestore verrà messo in coda, ed i corrispondenti gestori di `mousemove` verranno chiamati dopo che l'elaborazione di `onclick` sarà terminata. From dc980d562fea6c27dc78196d920183900858d6df Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Fri, 5 Feb 2021 22:43:44 +0100 Subject: [PATCH 10/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 26f5f21b3..9add1d6cd 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -282,7 +282,7 @@ Per eventi personalizzati dovremmo usare il costruttore `CustomEvent`, il quale Nonostante tecnicamente esista la possibilità di generare eventi del browser come `click` o `keydown`, dovremmo usarli con molta attenzione. -Non dovremmo generare eventi del browser perché una pratica poco elegante e sporca nell'esecuzione dei gestori. La maggior parte delle volte, si tratta di cattiva architettura. +Non dovremmo generare eventi del browser perché è una pratica poco elegante e sporca nell'esecuzione dei gestori. La maggior parte delle volte, si tratta di cattiva architettura. Gi eventi nativi possono essere generati quando: From fec2fed62e566d9df7dd0ae6bb97f852ac00d39b Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Tue, 9 Feb 2021 20:04:41 +0100 Subject: [PATCH 11/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 9add1d6cd..74ae75b35 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -29,7 +29,7 @@ Argomenti: Dopo la creazione di un evento, dovremmo "eseguirlo" su un elemento, attraverso la chiamata `elem.dispatchEvent(event)`. -A questo punto, il gestore reagisce su di esso come se fosse un evento del browser normale. Se l'evento è stato creato con l'opzione `bubbles` attivata, allora procederà con il bubbling. +A questo punto, il gestore reagisce su di esso come se fosse un normale evento del browser. Se l'evento è stato creato con l'opzione `bubbles` attivata, allora procederà con il bubbling. Nel seguente esempio, l'evento `click` viene inizializzato attraverso JavaScript. Il gestore si comporta esattamente come se il pulsante fosse stato cliccato: From 1c02d1eca385f0c307d53c6caa2dffef064ba4b9 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Tue, 9 Feb 2021 20:04:49 +0100 Subject: [PATCH 12/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 74ae75b35..eda2c92e3 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -244,7 +244,7 @@ Questo non vale solo per `dispatchEvent`, ma esistono altri casi. Se un gestore Ora mettiamo il caso che questa cosa non ci stia bene, e che invece volessimo che `onclick` venisse elaborato per primo, indipendentemente da `menu-open` o prima di qualunque altro evento interno. -Allora potremmo sia inserire `dispatchEvent` (o un altra chiamata che generi un evento) alla fine di `onclick` o, forse anche meglio, avvolgerlo in un `setTimeout` a ritardo zero: +Allora potremmo sia inserire `dispatchEvent` (o un altra chiamata che generi un evento) alla fine di `onclick` oppure, forse anche meglio, incapsularlo in un `setTimeout` a ritardo zero: ```html run From 7774c2a4a962d9e7c97810068be0cd74c2c21286 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Tue, 9 Feb 2021 20:04:56 +0100 Subject: [PATCH 13/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index eda2c92e3..041a98d91 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -156,7 +156,7 @@ Esempio: La proprietà `detail` può contenere qualunque tipo di dato. Tecnicamente si potrebbe farne a meno, dato che possiamo assegnare qualunque proprietà dentro un normalissimo oggetto `new Event`, dopo la sua creazione. Ma `CustomEvent` fornisce il campo speciale `detail` adatto allo scopo, con cui ci si assicura di evitare conflitti con le altre proprietà dell'evento. -Oltretutto, la classe evento descrive "che tipo di evento" sia, e se si tratta di un evento personalizzato, allora possiamo usare `CustomEvent` anche solo per palesare di cosa si tratti. +Oltretutto, la classe evento descrive "che tipo di evento" sia, e se si tratta di un evento personalizzato, quindi potremmo usare `CustomEvent` anche solo per palesare di cosa si tratti. ## event.preventDefault() From d2cddafe5f69727ab64deeabb6dd4cf9fb2e190f Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Tue, 9 Feb 2021 20:05:03 +0100 Subject: [PATCH 14/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 041a98d91..7ab608361 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -284,7 +284,7 @@ Nonostante tecnicamente esista la possibilità di generare eventi del browser co Non dovremmo generare eventi del browser perché è una pratica poco elegante e sporca nell'esecuzione dei gestori. La maggior parte delle volte, si tratta di cattiva architettura. -Gi eventi nativi possono essere generati quando: +Gli eventi nativi possono essere generati: - Come un modo poco pulito per far sì che delle librerie di terze parti lavorino nella maniera voluta, se queste non forniscono altri modi con cui poter interagire. - Per test automatici, per "cliccare il pulsante" nello script e vedere se l'interfaccia risponde correttamente. From 863c45170924d080a59eec20e7415508f3c0aac3 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Tue, 9 Feb 2021 20:05:11 +0100 Subject: [PATCH 15/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 7ab608361..02cd5031c 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -276,7 +276,7 @@ Il costruttore generico `Event(name, options)` accetta un nome di evento arbitra - `bubbles: true` se l'evento deve fare bubbling. - `cancelable: true` se `event.preventDefault()` deve poter funzionare. -Altri costruttori di eventi nativi come `MouseEvent`, `KeyboardEvent` e così via, accettano proprietà specifiche per quel tipo di evento. Ad esempio, `clientX` per glie eventi del mouse. +Altri costruttori di eventi nativi come `MouseEvent`, `KeyboardEvent` e così via, accettano proprietà specifiche per quel tipo di evento. Ad esempio, `clientX` per gli eventi del mouse. Per eventi personalizzati dovremmo usare il costruttore `CustomEvent`, il quale ha una opzione aggiuntiva chiamata `detail`, per potervi assegnare i dati specifici del tipo di evento, ai quali i gestori potranno accedere tramite `event.detail`. From 8588404a0a1e4824aba770455061cce8b97576ae Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Tue, 9 Feb 2021 20:05:23 +0100 Subject: [PATCH 16/16] Update 2-ui/2-events/05-dispatch-events/article.md Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 02cd5031c..d6be03964 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -264,7 +264,7 @@ Allora potremmo sia inserire `dispatchEvent` (o un altra chiamata che generi un ``` -Adesso `dispatchEvent` viene eseguito in maniera asincrona, dopo che l'esecuzione del codice corrente è terminata, incluso `menu.onclick`, ed in questo modo i gestori sono totalmente separati. +Adesso `dispatchEvent` viene eseguito in maniera asincrona dopo che l'esecuzione del codice corrente è terminata, incluso `menu.onclick`, ed in questo modo i gestori sono totalmente separati. L'ordine di output diventa: 1 -> 2 -> annidato. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy