Created
November 20, 2023 13:08
-
-
Save ikitommi/3247ef5b62ab9df4c215733eff22d072 to your computer and use it in GitHub Desktop.
js-events learning trip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <h1>framed!</h1> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- inspired by https://javascript.info/onload-ondomcontentloaded --> | |
| <html> | |
| <body> | |
| <script> | |
| // readyState: loading|interactive|complete | |
| console.log("initial readyState: " + document.readyState); | |
| // print state changes | |
| document.addEventListener("readystatechange", () => { | |
| console.log("readyState => ",document.readyState); | |
| }); | |
| document.addEventListener("DOMContentLoaded", () => { | |
| console.log("DOMContentLoaded") | |
| }); | |
| // page is fully loaded (images too) | |
| window.addEventListener("load", (event) => { | |
| console.log("Page loaded"); | |
| console.log(`Image size: ${img.offsetWidth}x${img.offsetHeight}`); | |
| }); | |
| // user iniates leaving from page | |
| window.addEventListener("beforeunload", (event) => { | |
| console.log("User about to leave the page...") | |
| navigator.sendBeacon("https://echo.free.beeceptor.com", JSON.stringify({"phase": "beforeunload"})); | |
| }); | |
| // user leaves the page (no XMLHttpRequest allowed, just sendBeacon) | |
| window.addEventListener("unload", function() { | |
| navigator.sendBeacon("https://echo.free.beeceptor.com", JSON.stringify({"phase": "unload"})); | |
| console.log("... user has left the page."); | |
| }); | |
| </script> | |
| <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0"> | |
| <script> | |
| img.onload = () => console.log("img onload"); | |
| </script> | |
| <hr> | |
| <iframe src="iframe.html" onload="console.log('iframe onload')"></iframe> | |
| <hr> | |
| <a href="https://github.com/metosin/malli/">Malli</a> | |
| <hr> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment