[javascript]currentTargetとtargetの違い


currentTarget


https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
イベントハンドラは、接続された要素を指します.

target


https://developer.mozilla.org/en-US/docs/Web/API/Event/target
実際のイベントが発生した場所を返し、クリックした要素を返します.

<ul id="parent">
    <li id="1">Item 1</li>
    <li id="2">Item 2</li>
    <li id="3">Item 3</li>
</ul>

<script>
    const parent = document.querySelector('#parent');
    parent.addEventListener("click", function (e) {
        console.log(e.currentTarget);
        console.log(e.target);
    });
</script>

結果



->currentTargetイベントリスナー接続の親エレメントを出力し、targetクリックした子エレメントを出力します.