m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-07 03:16:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dev-notes/languages/javascript/events-animation.html

4368 lines
No EOL
87 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Marcello Lamonaca">
<link rel="canonical" href="http://m-lamonaca.github.io/dev-notes/languages/javascript/events-animation.html">
<link rel="prev" href="dom.html">
<link rel="next" href="ajax.html">
<link rel="icon" href="../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.34">
<title>Events & Animation - Dev Notes</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.35f28582.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<script src="https://unpkg.com/iframe-worker/shim"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="Events & Animation - Dev Notes" >
<meta property="og:description" content="None" >
<meta property="og:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/javascript/events-animation.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="http://m-lamonaca.github.io/dev-notes/languages/javascript/events-animation.html" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Events & Animation - Dev Notes" >
<meta name="twitter:description" content="None" >
<meta name="twitter:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/javascript/events-animation.png" >
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#events-animation" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../index.html" title="Dev Notes" class="md-header__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Dev Notes
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Events & Animation
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../index.html" class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../containers/docker.html" class="md-tabs__link">
Containers
</a>
</li>
<li class="md-tabs__item">
<a href="../../databases/redis.html" class="md-tabs__link">
Databases
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../html/html.html" class="md-tabs__link">
Languages
</a>
</li>
<li class="md-tabs__item">
<a href="../../misc/git.html" class="md-tabs__link">
Misc
</a>
</li>
<li class="md-tabs__item">
<a href="../../linux/filesystem/file-links.html" class="md-tabs__link">
Linux
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../index.html" title="Dev Notes" class="md-nav__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
Dev Notes
</label>
<div class="md-nav__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../index.html" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Containers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Containers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../containers/docker.html" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../containers/kubernetes.html" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Databases
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Databases
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../databases/redis.html" class="md-nav__link">
<span class="md-ellipsis">
Redis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../databases/sql.html" class="md-nav__link">
<span class="md-ellipsis">
SQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../databases/mongo-db.html" class="md-nav__link">
<span class="md-ellipsis">
MongoDB
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
Languages
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Languages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../html/html.html" class="md-nav__link">
<span class="md-ellipsis">
HTML
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../markdown.html" class="md-nav__link">
<span class="md-ellipsis">
Markdown
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../css/css.html" class="md-nav__link">
<span class="md-ellipsis">
CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../c/c.html" class="md-nav__link">
<span class="md-ellipsis">
C
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../kotlin/kotlin.html" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../swift/swift.html" class="md-nav__link">
<span class="md-ellipsis">
Swift
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" >
<label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="">
<span class="md-ellipsis">
Assembly
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_7">
<span class="md-nav__icon md-icon"></span>
Assembly
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../assembly/intel.html" class="md-nav__link">
<span class="md-ellipsis">
Intel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../assembly/riscv.html" class="md-nav__link">
<span class="md-ellipsis">
RISC-V
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" >
<label class="md-nav__link" for="__nav_4_8" id="__nav_4_8_label" tabindex="">
<span class="md-ellipsis">
Python
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8">
<span class="md-nav__icon md-icon"></span>
Python
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/python.html" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_2" >
<label class="md-nav__link" for="__nav_4_8_2" id="__nav_4_8_2_label" tabindex="0">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_2">
<span class="md-nav__icon md-icon"></span>
Modules
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/modules/argparse.html" class="md-nav__link">
<span class="md-ellipsis">
argparse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/collections.html" class="md-nav__link">
<span class="md-ellipsis">
collection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/csv.html" class="md-nav__link">
<span class="md-ellipsis">
csv
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/ftplib.html" class="md-nav__link">
<span class="md-ellipsis">
ftplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/itertools.html" class="md-nav__link">
<span class="md-ellipsis">
itertools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/json.html" class="md-nav__link">
<span class="md-ellipsis">
json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/logging.html" class="md-nav__link">
<span class="md-ellipsis">
logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/shutil.html" class="md-nav__link">
<span class="md-ellipsis">
shutil
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/smtplib.html" class="md-nav__link">
<span class="md-ellipsis">
smtplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/socket.html" class="md-nav__link">
<span class="md-ellipsis">
socket
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/sqlite.html" class="md-nav__link">
<span class="md-ellipsis">
sqlite
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/time-datetime.html" class="md-nav__link">
<span class="md-ellipsis">
time & datetime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/unittest.html" class="md-nav__link">
<span class="md-ellipsis">
unittest
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_3" >
<label class="md-nav__link" for="__nav_4_8_3" id="__nav_4_8_3_label" tabindex="0">
<span class="md-ellipsis">
Libraries
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_3">
<span class="md-nav__icon md-icon"></span>
Libraries
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/libs/tkinter.html" class="md-nav__link">
<span class="md-ellipsis">
TKinter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/numpy.html" class="md-nav__link">
<span class="md-ellipsis">
Numpy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/pandas.html" class="md-nav__link">
<span class="md-ellipsis">
Pandas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/seaborn.html" class="md-nav__link">
<span class="md-ellipsis">
Seaborn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/requests.html" class="md-nav__link">
<span class="md-ellipsis">
Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/beautiful-soup.html" class="md-nav__link">
<span class="md-ellipsis">
Beatiful Soup
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" >
<label class="md-nav__link" for="__nav_4_9" id="__nav_4_9_label" tabindex="">
<span class="md-ellipsis">
.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9">
<span class="md-nav__icon md-icon"></span>
.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_1" >
<label class="md-nav__link" for="__nav_4_9_1" id="__nav_4_9_1_label" tabindex="0">
<span class="md-ellipsis">
C#
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_1">
<span class="md-nav__icon md-icon"></span>
C#
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/csharp/csharp.html" class="md-nav__link">
<span class="md-ellipsis">
C#
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/linq.html" class="md-nav__link">
<span class="md-ellipsis">
Linq
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/collections.html" class="md-nav__link">
<span class="md-ellipsis">
Collections
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/reactive-extensions.html" class="md-nav__link">
<span class="md-ellipsis">
Reactive Extensions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/async-programming.html" class="md-nav__link">
<span class="md-ellipsis">
Async Programming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_2" >
<label class="md-nav__link" for="__nav_4_9_2" id="__nav_4_9_2_label" tabindex="0">
<span class="md-ellipsis">
ASP.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_2">
<span class="md-nav__icon md-icon"></span>
ASP.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/asp.net/minimal-api.html" class="md-nav__link">
<span class="md-ellipsis">
Minimal API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/filters.html" class="md-nav__link">
<span class="md-ellipsis">
FIlters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/middleware.html" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/razor-syntax.html" class="md-nav__link">
<span class="md-ellipsis">
Razor Syntax
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/blazor.html" class="md-nav__link">
<span class="md-ellipsis">
Blazor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/signalr.html" class="md-nav__link">
<span class="md-ellipsis">
SignalR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/web-forms.html" class="md-nav__link">
<span class="md-ellipsis">
Web Forms
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_3" >
<label class="md-nav__link" for="__nav_4_9_3" id="__nav_4_9_3_label" tabindex="0">
<span class="md-ellipsis">
Database
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_3">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/database/ado.net.html" class="md-nav__link">
<span class="md-ellipsis">
ADO.NET
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/database/entity-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Entity Framework
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10" >
<label class="md-nav__link" for="__nav_4_10" id="__nav_4_10_label" tabindex="">
<span class="md-ellipsis">
Java
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10">
<span class="md-nav__icon md-icon"></span>
Java
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/java.html" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/java-collection-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Java Collection Framework
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/dao.html" class="md-nav__link">
<span class="md-ellipsis">
DAO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4" >
<label class="md-nav__link" for="__nav_4_10_4" id="__nav_4_10_4_label" tabindex="0">
<span class="md-ellipsis">
Web
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4">
<span class="md-nav__icon md-icon"></span>
Web
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/web/servlet.html" class="md-nav__link">
<span class="md-ellipsis">
Serverlet
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4_2" >
<label class="md-nav__link" for="__nav_4_10_4_2" id="__nav_4_10_4_2_label" tabindex="0">
<span class="md-ellipsis">
Spring
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_10_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4_2">
<span class="md-nav__icon md-icon"></span>
Spring
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/spring/pom.xml.html" class="md-nav__link">
<span class="md-ellipsis">
POM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/spring/spring-project.html" class="md-nav__link">
<span class="md-ellipsis">
Project Structure
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" >
<label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="">
<span class="md-ellipsis">
PHP
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11">
<span class="md-nav__icon md-icon"></span>
PHP
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../php/php.html" class="md-nav__link">
<span class="md-ellipsis">
PHP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/database.html" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/web.html" class="md-nav__link">
<span class="md-ellipsis">
Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/dependency-injection.html" class="md-nav__link">
<span class="md-ellipsis">
Dependency Injection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/composer.html" class="md-nav__link">
<span class="md-ellipsis">
Composer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/psr-7.html" class="md-nav__link">
<span class="md-ellipsis">
PSR 7
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/plates-templating.html" class="md-nav__link">
<span class="md-ellipsis">
Plates
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11_9" >
<label class="md-nav__link" for="__nav_4_11_9" id="__nav_4_11_9_label" tabindex="0">
<span class="md-ellipsis">
Simple MVC
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_11_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11_9">
<span class="md-nav__icon md-icon"></span>
Simple MVC
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../php/simple-mvc/simple-mvc.html" class="md-nav__link">
<span class="md-ellipsis">
Simple MVC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/simple-mvc/rest-api.html" class="md-nav__link">
<span class="md-ellipsis">
REST API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_12" >
<label class="md-nav__link" for="__nav_4_12" id="__nav_4_12_label" tabindex="">
<span class="md-ellipsis">
Rust
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_12">
<span class="md-nav__icon md-icon"></span>
Rust
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../rust/rust.html" class="md-nav__link">
<span class="md-ellipsis">
Rust
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/macros.html" class="md-nav__link">
<span class="md-ellipsis">
Macros
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/cargo.html" class="md-nav__link">
<span class="md-ellipsis">
Cargo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/concurrency.html" class="md-nav__link">
<span class="md-ellipsis">
Concurrency
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13" checked>
<label class="md-nav__link" for="__nav_4_13" id="__nav_4_13_label" tabindex="">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_13_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4_13">
<span class="md-nav__icon md-icon"></span>
Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="javascript.html" class="md-nav__link">
<span class="md-ellipsis">
Javascript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="dom.html" class="md-nav__link">
<span class="md-ellipsis">
DOM
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Events & Animation
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="events-animation.html" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Events & Animation
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#events" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
<nav class="md-nav" aria-label="Events">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#managing-event-listeners" class="md-nav__link">
<span class="md-ellipsis">
Managing Event Listeners
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#bubbling-capturing" class="md-nav__link">
<span class="md-ellipsis">
Bubbling &amp; Capturing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dispatching-custom-events" class="md-nav__link">
<span class="md-ellipsis">
Dispatching Custom Events
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#animation" class="md-nav__link">
<span class="md-ellipsis">
Animation
</span>
</a>
<nav class="md-nav" aria-label="Animation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#element-position-dimensions" class="md-nav__link">
<span class="md-ellipsis">
Element Position &amp; dimensions
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="ajax.html" class="md-nav__link">
<span class="md-ellipsis">
AJAX
</span>
</a>
</li>
<li class="md-nav__item">
<a href="jquery.html" class="md-nav__link">
<span class="md-ellipsis">
jQuery
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13_6" >
<label class="md-nav__link" for="__nav_4_13_6" id="__nav_4_13_6_label" tabindex="0">
<span class="md-ellipsis">
React
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_13_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13_6">
<span class="md-nav__icon md-icon"></span>
React
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="react/react.html" class="md-nav__link">
<span class="md-ellipsis">
React
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/react-router.html" class="md-nav__link">
<span class="md-ellipsis">
React Router
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/react-tests.html" class="md-nav__link">
<span class="md-ellipsis">
React Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/redux.html" class="md-nav__link">
<span class="md-ellipsis">
Redux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/redux-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Redux Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="svelte/svelte.html" class="md-nav__link">
<span class="md-ellipsis">
Svelte
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_14" >
<label class="md-nav__link" for="__nav_4_14" id="__nav_4_14_label" tabindex="">
<span class="md-ellipsis">
PowerShell
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_14">
<span class="md-nav__icon md-icon"></span>
PowerShell
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../powershell/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../powershell/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_15" >
<label class="md-nav__link" for="__nav_4_15" id="__nav_4_15_label" tabindex="">
<span class="md-ellipsis">
Bash
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_15_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_15">
<span class="md-nav__icon md-icon"></span>
Bash
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../bash/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../bash/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Misc
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Misc
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../misc/git.html" class="md-nav__link">
<span class="md-ellipsis">
Git
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/graph-ql.html" class="md-nav__link">
<span class="md-ellipsis">
GraphQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/regular-expressions.html" class="md-nav__link">
<span class="md-ellipsis">
RegEx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/ssh.html" class="md-nav__link">
<span class="md-ellipsis">
SSH
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/web-components.html" class="md-nav__link">
<span class="md-ellipsis">
WebComponents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Linux
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Linux
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
<label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
<span class="md-ellipsis">
Filesystem
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
Filesystem
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../linux/filesystem/file-links.html" class="md-nav__link">
<span class="md-ellipsis">
File Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/filesystem/procfs.html" class="md-nav__link">
<span class="md-ellipsis">
/proc
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/filesystem/sysfs.html" class="md-nav__link">
<span class="md-ellipsis">
/sys
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
<label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
<span class="md-ellipsis">
System Init
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_2">
<span class="md-nav__icon md-icon"></span>
System Init
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../linux/init/systemd.html" class="md-nav__link">
<span class="md-ellipsis">
Systemd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/init/open-rc.html" class="md-nav__link">
<span class="md-ellipsis">
OpenRC
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#events" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
<nav class="md-nav" aria-label="Events">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#managing-event-listeners" class="md-nav__link">
<span class="md-ellipsis">
Managing Event Listeners
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#bubbling-capturing" class="md-nav__link">
<span class="md-ellipsis">
Bubbling &amp; Capturing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dispatching-custom-events" class="md-nav__link">
<span class="md-ellipsis">
Dispatching Custom Events
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#animation" class="md-nav__link">
<span class="md-ellipsis">
Animation
</span>
</a>
<nav class="md-nav" aria-label="Animation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#element-position-dimensions" class="md-nav__link">
<span class="md-ellipsis">
Element Position &amp; dimensions
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="events-animation">Events &amp; Animation</h1>
<h2 id="events">Events</h2>
<p>Event Types:</p>
<ul>
<li><strong>Mouse Events</strong>: <code>mousedown</code>, <code>mouseup</code>, <code>click</code>, <code>dbclick</code>, <code>mousemove</code>, <code>mouseover</code>, <code>mousewheel</code>, <code>mouseout</code>, <code>contextmenu</code>, ...</li>
<li><strong>Touch Events</strong>: <code>touchstart</code>, <code>touchmove</code>, <code>touchend</code>, <code>touchcancel</code>, ...</li>
<li><strong>Keyboard Events</strong>: <code>keydown</code>, <code>keypress</code>, <code>keyup</code>, ...</li>
<li><strong>Form Events</strong>: <code>focus</code>, <code>blur</code>, <code>change</code>, <code>submit</code>, ...</li>
<li><strong>Window Events</strong>: <code>scroll</code>, <code>resize</code>, <code>hashchange</code>, <code>load</code>, <code>unload</code>, ...</li>
</ul>
<h3 id="managing-event-listeners">Managing Event Listeners</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span>
<span class="normal"><a href="#__codelineno-0-2">2</a></span>
<span class="normal"><a href="#__codelineno-0-3">3</a></span>
<span class="normal"><a href="#__codelineno-0-4">4</a></span>
<span class="normal"><a href="#__codelineno-0-5">5</a></span>
<span class="normal"><a href="#__codelineno-0-6">6</a></span>
<span class="normal"><a href="#__codelineno-0-7">7</a></span>
<span class="normal"><a href="#__codelineno-0-8">8</a></span>
<span class="normal"><a href="#__codelineno-0-9">9</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">domNode</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;id&quot;</span><span class="p">);</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="kd">var</span><span class="w"> </span><span class="nx">onEvent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// parameter contains info on the triggered event</span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span><span class="w"> </span><span class="c1">// block execution of default action</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="w"> </span><span class="c1">// logic here</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="p">}</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="nx">domNode</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">eventType</span><span class="p">,</span><span class="w"> </span><span class="nx">callback</span><span class="p">);</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a><span class="nx">domNode</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="nx">eventType</span><span class="p">,</span><span class="w"> </span><span class="nx">callback</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<h3 id="bubbling-capturing">Bubbling &amp; Capturing</h3>
<p>Events in Javascript propagate through the DOM tree.</p>
<p><a href="https://javascript.info/bubbling-and-capturing">Bubbling and Capturing</a>
<a href="https://www.sitepoint.com/event-bubbling-javascript/">What Is Event Bubbling in JavaScript? Event Propagation Explained</a></p>
<h3 id="dispatching-custom-events">Dispatching Custom Events</h3>
<p>Event Options:</p>
<ul>
<li><code>bubbles</code> (bool): whether the event propagates through bubbling</li>
<li><code>cancellable</code> (bool): if <code>true</code> the "default action" may be prevented</li>
</ul>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Event</span><span class="p">(</span><span class="nx">type</span><span class="w"> </span><span class="p">[,</span><span class="nx">options</span><span class="p">]);</span><span class="w"> </span><span class="c1">// create the event, type can be custom</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CustomEvent</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">detail</span><span class="o">:</span><span class="w"> </span><span class="cm">/* custom data */</span><span class="w"> </span><span class="p">});</span><span class="w"> </span><span class="c1">// create event w/ custom data</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="nx">domNode</span><span class="p">.</span><span class="nx">dispatchEvent</span><span class="p">(</span><span class="nx">event</span><span class="p">);</span><span class="w"> </span><span class="c1">// launch the event</span>
</code></pre></div></td></tr></table></div>
<p><img alt="Event Inheritance" src="../../img/javascript_event-inheritance.avif" /></p>
<h2 id="animation">Animation</h2>
<p>The window object is the assumed global object on a page.</p>
<p>Animation in JavascriptThe standard way to animate in JS is to use window methods.
It's possible to animate CSS styles to change size, transparency, position, color, etc.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span>
<span class="normal"><a href="#__codelineno-2-11">11</a></span>
<span class="normal"><a href="#__codelineno-2-12">12</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="c1">//Calls a function once after a delay</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">callbackFunction</span><span class="p">,</span><span class="w"> </span><span class="nx">delayMilliseconds</span><span class="p">);</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="c1">//Calls a function repeatedly, with specified interval between each call</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="nb">window</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="nx">callbackFunction</span><span class="p">,</span><span class="w"> </span><span class="nx">delayMilliseconds</span><span class="p">);</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a><span class="c1">//To stop an animation store the timer into a variable and clear it</span>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a><span class="nb">window</span><span class="p">.</span><span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span>
<a id="__codelineno-2-9" name="__codelineno-2-9"></a><span class="nb">window</span><span class="p">.</span><span class="nx">clearInterval</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span>
<a id="__codelineno-2-10" name="__codelineno-2-10"></a>
<a id="__codelineno-2-11" name="__codelineno-2-11"></a><span class="c1">// execute a callback at each frame</span>
<a id="__codelineno-2-12" name="__codelineno-2-12"></a><span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">callbackFunction</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<h3 id="element-position-dimensions">Element Position &amp; dimensions</h3>
<p><a href="https://stackoverflow.com/a/294273/8319610">StackOverflow</a>
<a href="https://stackoverflow.com/a/46772849/8319610">Wrong dimensions at runtime</a></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-3-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-3-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-3-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-3-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-3-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-3-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-3-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-3-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-3-10">10</a></span>
<span class="normal"><a href="#__codelineno-3-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="o">&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">());</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="nx">DOMRect</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w"> </span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="mf">177</span><span class="p">,</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="w"> </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">54.7</span><span class="p">,</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="w"> </span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="mf">278.5</span><span class="p">,</span><span class="err">​</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a><span class="w"> </span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="mf">909.5</span><span class="p">,</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a><span class="w"> </span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="mf">122.3</span><span class="p">,</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">631</span><span class="p">,</span>
<a id="__codelineno-3-9" name="__codelineno-3-9"></a><span class="w"> </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="mf">278.5</span><span class="p">,</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a><span class="w"> </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="mf">122.3</span><span class="p">,</span>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="dom.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: DOM">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
DOM
</div>
</div>
</a>
<a href="ajax.html" class="md-footer__link md-footer__link--next" aria-label="Next: AJAX">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
AJAX
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
MIT
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://hachyderm.io/@m_lamonaca" target="_blank" rel="noopener me" title="hachyderm.io" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="https://github.com/m-lamonaca" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "navigation.indexes", "navigation.tracking", "navigation.pruning", "navigation.sections", "navigation.top", "navigation.tabs", "navigation.tabs.sticky", "navigation.footer", "toc.follow", "content.code.copy"], "search": "../../assets/javascripts/workers/search.07f07601.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.56dfad97.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink