event.currentTarget 是jQuery中一個非常實用的事件對象屬性，它在事件冒泡階段標識當前DOM元素，通常等於this。

什麼是event.currentTarget？

  • 定義：在事件冒泡階段內的當前DOM元素
  • 特點：通常等於this（在事件處理函數中）
  • 與event.target的區別：event.target是真正觸發事件的元素，而event.currentTarget是綁定事件處理程序的元素

代碼使用

1. 基本用法

$("h1, h2, p").click(function(event) {
    // 通常等於 this，會彈出 true
    alert(event.currentTarget === this);
});

2. 返回元素內容

$("h1, p").click(function(event) {
    // 彈出被點擊元素的內容
    alert(event.currentTarget.innerHTML);
});

3. 區分target和currentTarget

<div id="container">
    <button id="btn">點擊我</button>
</div>

<script>
$("#container").on("click", function(event) {
    console.log('target:', event.target.id);        // 輸出 "btn"
    console.log('currentTarget:', event.currentTarget.id);  // 輸出 "container"
});
</script>

4. 事件委託

<ul id="list">
    <li><button class="del-btn">刪除</button></li>
</ul>

<script>
// 使用事件委託監聽未來可能添加的 .del-btn
$("#list").on("click", ".del-btn", function(event) {
    $(this).parent().remove();
});
</script>

5. 更復雜的

<ul>
    <li class="li">
        <p>這裏是li裏面的p</p>
    </li>
    <!-- 其他li元素 -->
</ul>

<script>
$(function(){
    $(document).on("click", ".li", function(e){
        console.log('currentTarget:', e.currentTarget.nodeName);  // 輸出 "LI"
        console.log('target:', e.target.nodeName);               // 輸出 "P"
    });
});
</script>

為什麼需要區分target和currentTarget？

在事件委託（Event Delegation）中，這一點特別重要。當事件發生在子元素上時，event.target會是子元素，而event.currentTarget會是綁定事件的父元素。這使得我們能夠高效地處理動態添加的元素。