jQuery event.delegateTarget 屬性

jQuery 的event.delegateTarget 屬性指的是附加事件處理程式的元素，或者返回當前呼叫的事件處理程式附加到的元素。

此屬性在事件委託的上下文中非常有用，在事件委託中，事件處理程式附加到父元素以進行處理。

當事件直接附加到元素且不發生委託時，event.delegateTarget 等效於 event.currentTarget 屬性。

語法

以下是 jQuery event.delegateTarget 屬性的語法：

event.delegateTarget

引數

此方法不接受任何引數。

返回值

此屬性返回當前呼叫的事件處理程式附加到的元素。

示例 1

下面的程式演示瞭如何使用 jQuery event.delegateTarget 屬性：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        p{
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p>Click me to change color</p>
    </div>
    <div>
        <p>Click me to change color</p>
    </div>
    <script>
        $('p').on("click", function(event){
            $(event.delegateTarget).css("color", "green");
        })
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示兩個 "p" 元素，每個元素包含一些文字。當用戶單擊單個 "p" 元素時，該特定元素的顏色將更改：

示例 2

以下是 jQuery event.delegateTarget 屬性的另一個示例。我們使用此屬性來檢索當前附加事件處理程式的元素：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        p{
            font-size: 20px;
            font-weight: bold;
        }
        div{
            width: 200px;
            padding: 5px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>Inside first div</p>
        <button>Click me</button>
    </div>
    <div>
        <p>Inside second div</p>
        <button>Click me</button>
    </div>
    <script>
        $('div').on("click", "button", function(event){
            $value = $(this).closest('div');
            alert($value.find('p').text());
            $(event.delegateTarget).css({"background-color": "green", "color": "white"});
        })
    </script>
</body>
</html>

輸出

上述程式顯示兩個 div 元素，每個元素包含一個 "p" 和一個 "button" 元素。單擊按鈕時，相應的 div 元素的背景顏色將變為綠色：

jquery_ref_events.htm

列印頁面