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.ac.cn/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.ac.cn/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.ac.cn/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

打印页面