jQuery event.currentTarget 屬性

jQuery 的event.currentTarget 屬性用於引用直接附加事件處理程式的 DOM 元素。此屬性在事件委託中特別有用。

當事件從子元素冒泡到附加了處理程式的祖先元素時，event.currentTarget 有助於識別祖先層次結構中觸發事件的特定元素。

語法

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

event.currentTarget

引數

此方法不接受任何引數。

返回值

此屬性沒有任何返回值。

示例 1

以下是 jQuery event.currentTarget 屬性的基本示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below element to identify it.</p>
    <p>Hello Tutorialspoint</p>
    <script>
        $('p').click(function(event){
            alert(event.currentTarget);
        });
    </script>
</body>
</html>

輸出

上面的程式在使用者點選時顯示一條訊息，瀏覽器螢幕上出現一個彈出警報，顯示元素的名稱：

當用戶點選顯示的訊息時：

示例 2

以下是使用 jQuery event.currentTarget 屬性的另一個示例。我們使用此方法來識別 DOM 元素，並在使用者點選時更改其樣式顏色：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below element to identify it.</p>
    <p>This is a paragraph</p>
    <h1>This is a heading</h1>
    <script>
        $('p, h1').click(function(event){
           $(event.currentTarget).css({"color": "white", "background-color":"green"});
        });
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示一個段落和一個標題，當用戶點選它時，背景將變為綠色：

示例 3

在下面的示例中，我們將使用 jQuery event.currentTarget 屬性來識別附加事件處理程式的當前 DOM 元素，並使用 text() 方法檢索該元素的文字：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below button to identify and retrieve its text.</p>
    <button>Click me</button>
    <span id = 'tag'></span>
    <span id = 'name'></span>
    <script>
        $('button').click(function(event){
            $('#tag').text("Tag Name: " + event.currentTarget.tagName);
            $('#name').text(", Button Name: " + $(event.currentTarget).text());
        })
    </script>
</body>
</html>

輸出

執行上述程式後，它會顯示一個按鈕；當用戶點選它時，將顯示標籤名稱和按鈕文字：

當用戶點選顯示的按鈕時：

jquery_ref_events.htm

列印頁面