e.target - 了解目前點擊的是哪個元素

Posted on In

用「e.target」來查詢「我目前點擊的位置是什麼東西」

html:

1
2
3
4
5
<ul>
    <li>
        <a href="#">123</a>
    </li>
</ul>

我想要知道：當我點擊下圖中的紅色箭頭處，我點擊到的是「<a>」還是「<li>」還是「<ul>」還是「<body>」呢？

✅ 這時，就可以透過event這個 object 裡面所提供的資訊來得知

該如何得知「我目前點擊的元素」是什麼東西？

作法如下：

用e來查詢「我目前點擊的位置是什麼東西」

JS:

🎃 建立變數el，來選取.header

選取.header的原因為：我要去監控.header裡面「所有元素的狀態」

.addEventListener

🎃 當我點擊el時，用「參數e」來查詢各種狀態

1
2
3
4
5
6
var el = document.querySelector('.header');


el.addEventListener('click',function(e){
    console.log(e);
},false);

🍋 如果我點擊的是「連結的右方」

🎃 用「e裡面的target」來查詢「我目前點擊的位置是什麼東西」

🍋 在 Console 的「MouseEvent」裡面，就可以看到「target: li」，代表：我目前點擊的位置是li

🎃 用tagName來確認「我點擊到的東西」

🍋 點開「target: li」的下拉式選單，可以看到「tagName: “LI”」，代表：確認我點擊到的東西是「li」

用e.target來查詢「我目前點擊的位置是什麼東西」

JS:

🎃 用e.target來查詢「我目前點擊的位置是什麼東西」

1
2
3
4
5
6
var el = document.querySelector('.header');


el.addEventListener('click',function(e){
    console.log(e.target);
},false);

🍋 如果我點擊的是「連結的右方」

🎃 在 Console 就會顯示「<li>...</li>」，代表：我目前點擊的位置是「li」

🍋 如果我點擊的是「連結」

🎃 在 Console 就會顯示「<a href="#">123</a>」，代表：我目前點擊的位置是「a連結」

用e.target.nodeName來查詢「我目前點擊的是哪個節點」

JS:

🎃 用e.target.nodeName來查詢「我目前點擊的是哪個節點」

1
2
3
4
5
6
var el = document.querySelector('.header');


el.addEventListener('click',function(e){
    console.log(e.target.nodeName);
},false);

🍋 如果我點擊的是「連結的右方」

🎃 在 Console 就會顯示「LI」，代表：我目前點擊的位置是「li」