onclickとaddEventListenerの違いが感覚的に分からんかたので実験した
onclickはonclickで上書きできるが
onclickはaddEventListener('click')とは無関係なので同時に存在できる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
button { display: block; margin-bottom: 1rem; }
</style>
</head>
<body>
<div>a: <span id="a1"></span> , <span id="a2"></span></div>
<button id="a">button a</button>
<div>b: <span id="b1"></span> , <span id="b2"></span></div>
<button id="b">button b</button>
<div>c: <span id="c1"></span> , <span id="c2"></span></div>
<button id="c">button c</button>
<div>d: <span id="d1"></span> , <span id="d2"></span></div>
<button id="d">button d</button>
<script>
function click(id) {
return () => {
const s = document.getElementById(id);
s.textContent = `(Click ${id})`;
};
}
const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
const d = document.getElementById('d');
a.onclick = click('a1');
a.onclick = click('a2');
b.addEventListener('click', click('b1'));
b.addEventListener('click', click('b2'));
c.onclick = click('c1');
c.addEventListener('click', click('c2'));
d.addEventListener('click', click('d1'));
d.onclick = click('d2');
</script>
</body>
</html>