본문 바로가기

Event7

[javascript] Promise vs setTimeout:: why Promise resolved first? Why Promise is resolved before setTimeout? - Event loop, task queue, micro task queue, stack Promise vs setTimeout Promise.resolve schedules a microtask and the setTimeout schedules a macrotask. And the microtasks are executed before running the next macrotask. console.log(1) setTimeout(() => { console.log(3) }); Promise.resolve().then(() => console.log(4)) console.log(7) Interesting question. I.. 2023. 1. 7.
How to change themes between light and dark, @media /* TODO */ :root { --loading-height: 140px; --white: #ffffff; --black: #000000; } .light-theme { --background-color: var(--white); --color: var(--black); } .dark-theme { --background-color: var(--black); --color: var(--white); } * { transition: background-color 0.2s ease, color 0.1s ease; } /* TODO dark mode 처리 */ @media (prefers-color-scheme: dark) { body { background-color: var(--background-co.. 2022. 10. 10.
MouseEvent: key, metaKey, ctrlKey [javascript] key, metaKey, ctrlKey Ctrl key key: “Control” code: "ControllLeft" ctrlKey: true metaKey: false Mac Command key 2022. 7. 8.
[javascript][event] Detect mouse right click: context menu Is right click a Javascript event? Search: how to detect mouse right click in javascript window.oncontextmenu = function () { alert('Right Click') } $("#myId").mousedown(function(ev){ if(ev.which == 3) { alert("Right mouse button clicked on element with id myId"); } }); javascript detect right click Code Example document.body.onclick = function (e) { var isRightMB; e = e || window.event; if ("wh.. 2022. 7. 5.
requestFullscreen(): How to make dom Fullscreen [Document.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement) / [ShadowRoot.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/fullscreenElement) The fullscreenElement property tells you the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that's currently being displayed in fullscreen mode on the DOM (or .. 2022. 7. 2.
Keyboard Event: How to detect keyboard you typed: e.which, e.keycode, e.key, e.charcode, e.code which, keycode, key, charcode, code when I type 'f', charCode: 0 keyCode: 70 key='f' code='KeyF' which: 102 charCode, keyCode: deprecated charCode: Non-standard Reference 2022. 6. 29.
Event vs CustomEvent && How to trigger event with data Event vs CustomEvent CustomEvent can send data through 'detail' property, but Event can not do that; Event const eventInstance = new Event(':eventName'); // add event on document document.addEventListener(':eventName', (e) => { // TODO console.log(e); }); // trigger event document.dispatch(eventInstance);CustomEvent const customEventInstance = new CustomEvent(':custom.. 2022. 6. 27.

티스토리툴바