25:["$","title",null,{"children":"Event Playground | playground | Observable"}] 49:[] 29:{"id":"87e68255078d1ed3","slug":null,"title":"Event Playground","thumbnail":"bdfe4bf7912eae41c46eae8420a465b92ccdce7cc1e1deb57dd821e265242a13","access_level":"public","create_time":"$D2023-07-26T05:56:43.509Z","update_time":"$D2025-10-09T03:05:10.829Z","view_time":null,"first_public_time":"$D2023-07-26T05:56:43.509Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":379,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2342dae25f5264fb","login":"mick2","name":"Mick","avatar_url":"https://avatars-next.observableusercontent.com/45d5b4bd3fe0cf29fc8d4cb54f5d8a4482fc3c26f884c69034a4f3d9f9af4b54","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","role":"editor"},{"type":"individual","id":"2342dae25f5264fb","login":"mick2","name":"Mick","avatar_url":"https://avatars-next.observableusercontent.com/45d5b4bd3fe0cf29fc8d4cb54f5d8a4482fc3c26f884c69034a4f3d9f9af4b54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Event Playground","cells":[{"id":0,"value":"# Event Playground\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"## Pointer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"

\n click here\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"## Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"\n \n\n

\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"{\n const logger = new Logger();\n window.c2 = logger;\n return logger.display((l) => l.c);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"## Composition Event\n- https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"{\n const textarea = document.createElement(\"textarea\");\n textarea.addEventListener(\"compositionstart\", (e) => {\n window.c3.log(\"compositionstart\", e);\n });\n textarea.addEventListener(\"compositionupdate\", (e) => {\n window.c3.log(\"compositionupdate\", e);\n });\n textarea.addEventListener(\"compositionend\", (e) => {\n window.c3.log(\"compositionend\", e);\n });\n textarea.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\") {\n window.c3.log(\"enter\", e);\n }\n });\n\n return html`\n ${textarea}\n

\n \n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"{\n const logger = new Logger();\n window.c3 = logger;\n return logger.display((l) => l.c)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"## Selection change\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"viewof enableSelection = Inputs.toggle({ label: \"enable\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"{\n const logger = new Logger();\n window.c4 = logger;\n\n document.onselectionchange = (e) =>\n enableSelection && logger.log(\"selectionchange\", e);\n return logger.display((l) => l.c);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"## Visibility change","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"{\n const logger = new Logger();\n window.c5 = logger;\n\n document.onvisibilitychange = (e) => window.c5.log(\"visibilitychange\", e, document.visibilityState);\n return logger.display((l) => l.c);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"## Keyboard Event","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"{\n const logger = new Logger();\n window.c6 = logger;\n return logger.display((l) => l.c);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"import { Logger } from '@baotlake-playground/console'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"import { tailwind } from '@pkg/tailwind'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"tailwind","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null