Skip to content

Instantly share code, notes, and snippets.

@khoan

khoan/browser-event.html

Created June 2, 2022 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khoan/021001d0386b2b00924627e81dd7a28e to your computer and use it in GitHub Desktop.
Save khoan/021001d0386b2b00924627e81dd7a28e to your computer and use it in GitHub Desktop.
Download ZIP
browser event
Raw
browser-event.html
<!DOCTYPE html>
<html>
<head>
<title>Browser events</title>
</head>
<body>
<div>
https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html
<button>Click me</button>
</div>
<script>
function logEvent(event) {
const eventPhase = event.eventPhase;
const targetName = event.currentTarget?.tagName || event.currentTarget;
console.log(`[${eventPhase}:${targetName}] ${event.type} on ${event.target.tagName}`);
}
const EVENT_TYPE = "click";
// capturing phase
window.addEventListener(EVENT_TYPE, logEvent, {capture: true});
document.addEventListener(EVENT_TYPE, logEvent, {capture: true});
document.querySelector("html").addEventListener(EVENT_TYPE, logEvent, {capture: true});
document.body.addEventListener(EVENT_TYPE, logEvent, {capture: true});
document.querySelector("div").addEventListener(EVENT_TYPE, logEvent, {capture: true});
document.querySelector("button").addEventListener(EVENT_TYPE, logEvent, {capture: true});
// bubbling phase
window.addEventListener(EVENT_TYPE, logEvent);
document.addEventListener(EVENT_TYPE, logEvent);
document.querySelector("html").addEventListener(EVENT_TYPE, logEvent);
document.body.addEventListener(EVENT_TYPE, logEvent);
document.querySelector("div").addEventListener(EVENT_TYPE, logEvent);
document.querySelector("button").addEventListener(EVENT_TYPE, logEvent);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment