Source code
Revision control
Copy as Markdown
Other Tools
<!-- Any copyright is dedicated to the Public Domain.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bound event listeners test page</title>
</head>
<body>
<button id="initialSetup">initialSetup</button>
<button id="clicker">clicker</button>
<button id="handleEventClick">handleEventClick</button>
<button id="boundHandleEventClick">boundHandleEventClick</button>
<script type="text/javascript">
"use strict";
window.addEventListener("load", function() {
function initialSetup() {
const button = document.getElementById("initialSetup");
button.removeEventListener("click", initialSetup);
// eslint-disable-next-line no-debugger
debugger;
}
function clicker() {
window.foobar = "clicker";
}
function HandleEventClick() {
const button = document.getElementById("handleEventClick");
// Create a long prototype chain to test for weird edge cases.
button.addEventListener("click", Object.create(Object.create(this)));
}
HandleEventClick.prototype.handleEvent = function() {
window.foobar = "HandleEventClick";
};
function BoundHandleEventClick() {
const button = document.getElementById("boundHandleEventClick");
this.handleEvent = this.handleEvent.bind(this);
button.addEventListener("click", this);
}
BoundHandleEventClick.prototype.handleEvent = function() {
window.foobar = "BoundHandleEventClick";
};
const button = document.getElementById("clicker");
// Bind more than once to test for weird edge cases.
const boundClicker = clicker.bind(this).bind(this).bind(this);
button.addEventListener("click", boundClicker);
new HandleEventClick();
new BoundHandleEventClick();
const initButton = document.getElementById("initialSetup");
initButton.addEventListener("click", initialSetup);
}, {once: true});
</script>
</body>
</html>