This commit is contained in:
Ilya Kantor 2019-06-24 12:57:36 +03:00
parent c14f447007
commit d5f04d2b8e

View file

@ -241,20 +241,20 @@ Please note that the nested event `menu-open` bubbles up and is handled on the `
That's not only about `dispatchEvent`, there are other cases. JavaScript in an event handler can call methods that lead to other events -- they are too processed synchronously. That's not only about `dispatchEvent`, there are other cases. JavaScript in an event handler can call methods that lead to other events -- they are too processed synchronously.
If we don't like it, we can either put the `dispatchEvent` (or other event-triggering call) at the end of `onclick` or, if inconvenient, wrap it in `setTimeout(...,0)`: If we don't like it, we can either put the `dispatchEvent` (or other event-triggering call) at the end of `onclick` or wrap it in zero-delay `setTimeout`:
```html run ```html run
<button id="menu">Menu (click me)</button> <button id="menu">Menu (click me)</button>
<script> <script>
// 1 -> 2 -> nested // Now the result is: 1 -> 2 -> nested
menu.onclick = function() { menu.onclick = function() {
alert(1); alert(1);
// alert(2) // alert(2)
setTimeout(() => menu.dispatchEvent(new CustomEvent("menu-open", { setTimeout(() => menu.dispatchEvent(new CustomEvent("menu-open", {
bubbles: true bubbles: true
})), 0); })));
alert(2); alert(2);
}; };
@ -263,6 +263,8 @@ If we don't like it, we can either put the `dispatchEvent` (or other event-trigg
</script> </script>
``` ```
Now `dispatchEvent` runs asynchronously after the current code execution is finished, including `mouse.onclick`, so event handlers are totally separate.
## Summary ## Summary
To generate an event, we first need to create an event object. To generate an event, we first need to create an event object.