usakdsteen

ゆうさくですてぃーん

ぶらうざ:おんくりっく・あどいべんとりすな

onclickとaddEventListenerの違いが感覚的に分からんかたので実験した

 

onclickはonclickで上書きできるが

onclickはaddEventListener('click')とは無関係なので同時に存在できる

 

f:id:neetsdkasu:20200811041004p:plain

 

<!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>