Home / Questions / 1780
Accepted
devconcept
Asked: 2020-12-25 10:44:47 +0800 CST 2020-12-25 10:44:47 +0800 CST

JQuery事件中currentTarget、delegateTarget和target的区别

  • 772

我有这个简单的脚本，它使用 jQuery 捕获按钮事件：

$(function() {
  $('#myButton').click(function(evt) {
    console.log(evt);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton" type="button">
  Enviar
</button>

当变量evt显示在控制台中时，它有几个属性称为：

  • target
  • currentTarget
  • delegateTarget
  • relatedTarget

除了relatedTarget引用同一个对象，即引发事件的按钮之外，所有这些对象。有谁知道它们之间的区别是什么？如果它们都指向同一个对象，为什么 jQuery 使用它们？

javascript

2 Answers

  1. Best Answer

    target：指已分配事件的对象元素。考虑如下结构：

    <div class="box">
    <span>Texto aquí</span>
</div>

    和以下代码：

    $('.box').click(...);

    当事件被点击时clic，span它会被激活，因为它是由于气泡效应（更多信息在：Bubbling and JQuery Events - Java Architecture），此时点击的当前目标（currentTarget）是span，但目标为这样的 ( target) 是div。

    事件气泡 - JavaScript

    行为方式相同，relatedTarget但可用于委托其事件的对象，如下所示：

    <div class="box">
    <span>Texto aquí</span>
</div>

    jQuery 代码将是：

    $('.box').on('click', 'span', function(evt){...});

    他delegateTarget就是他div.box。值得一提的是，对于非委托元素：delegateTarget将始终等于currentTarget.

    • 8

  2. 好吧，根据 MDN（Mozilla 开发者网络）它说如下：

    event.target: 触发事件的 DOM 元素。

    event.currentTarget：始终指代已附加到event.target特定的事件处理程序元素，这标识了事件发生的元素。

    event.relatedTarget：标识事件的次要目标，您可以在使用鼠标事件时看到这一点。

    event.delegateTarget：包含正在执行的元素，当我们使用它.on()来了解谁调用了事件时。

    方法

    • 3