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

Difference between currentTarget, delegateTarget and target in JQuery event

  • 772

I have this simple script that captures a button event with 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>

When the variable evtis displayed in the console, it has several properties called:

  • target
  • currentTarget
  • delegateTarget
  • relatedTarget

All of them except relatedTargetrefer to the same object, the button that raised the event. Does anyone know what the difference between them is? If they all point to the same object, why does jQuery use them?

javascript

2 Answers

  1. Best Answer

    target: Refers to the object element on which the event has been assigned. Considering a structure like the following:

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

    and the following code:

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

    When clicthe spanevent is hit, it is activated because it is due to the bubble effect (more information at: Bubbling and JQuery Events - Java Architecture ), at that moment the current target of the click (the currentTarget) is the span, but the target as such ( target) is the div.

    Event Bubble - JavaScript

    The relatedTargetacts in the same way but is available for objects that delegate its event as we see it below:

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

    the jQuery code would be:

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

    He delegateTargetis he div.box. It is important to mention that for non-delegated elements: delegateTargetwill always be equal to currentTarget.

    • 8

  2. Well according to the MDN (Mozilla developer Network) It says the following:

    event.target: The DOM Element, which has triggered an event.

    event.currentTarget: Always refers to the event Handler element that has been attached to a event.targetspecific, this identifies the element in which the event occurred.

    event.relatedTarget: Identifies a secondary target for the event, you can see this when working with Mouse events.

    event.delegateTarget: Contains the element that is in execution progress, this is used when we work with .on()to know who invoked the event.

    Means

    • 3