How to Properly Bind Event Listeners to Core HTML Elements in Svelte
There are three special components in Svelte that lets you bind event listeners to core HTML elements. These are:
svelte:window
svelte:body
svelte:head
Copied to clipboard!
<!-- svelte:window allows you to bind event listeners to the window object -->
<svelte:window on:scroll={onScroll} />
<!-- svelte:body allows you to bind event listeners to the body -->
<svelte:body on:contextmenu={openContextMenu} />
<!-- svelte:head allows you to insert elements into the head of your document -->
<svelte:head>
<meta property="og:title" content="Weekly Webtips" />
<meta property="og:type" content="website" />
<meta property="og:url" content="webtips.dev" />
</svelte:head>
Resources:
π More Webtips
Master the Art of Frontend
- Access 100+ interactive lessons
- Unlimited access to hundreds of tutorials
- Prepare for technical interviews