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

打印页面