javascript - Javascript：如何返回发生点击事件的元素？

Question

我正在尝试构建一个更改多个元素类的函数，并对单击的特定元素进行一些更改。现在我只是想记录触发事件的元素。我可以记录被点击的元素，但由于 projectBox div 中有子元素，它会返回那个子元素，因为它位于它上面。

我的 HTML：

<div class = 'contentBox' id = 'contentBox'>
        
        <div id = p1 class = 'projectBox'><img = .... ></div>
        <div id = p2 class = 'projectBox'><img = .... ></div>
        <div id = p3 class = 'projectBox'><img = .... ></div>
        <div id = p4 class = 'projectBox'><img = .... ></div>
        <div id = p5 class = 'projectBox'><img = .... ></div>
    </div>

我的Javascript：

const pOne = document.getElementById('p1');
const pTwo = document.getElementById('p2');
const pThree = document.getElementById('p3');
const pFour = document.getElementById('p4');
const pFive = document.getElementById('p5');

const pOne = document.getElementById('p1');
const pTwo = document.getElementById('p2');
const pThree = document.getElementById('p3');
const pFour = document.getElementById('p4');
const pFive = document.getElementById('p5');

pOne.addEventListener('click',gridAnimator)
pTwo.addEventListener('click',gridAnimator)
pThree.addEventListener('click',gridAnimator)
pFour.addEventListener('click',gridAnimator)
pFive.addEventListener('click',gridAnimator)

function gridAnimator(){
    console.log(this.parentElement)  
}

现在，显然这会将父级记录为 : <div class="contentBox" id="contentBox">...</div>，但是我希望它在单击 pOne 时返回 pOne ，在单击 pTwo 时返回 pTwo 等等。

是否有简单的语法来完成这项工作，还是我需要解决这个问题？

谢谢！

标签： javascripthtmlevent-handling