Jquery event delegation article

An issue I have with the implementation of event delegation in Jquery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div id='alpha'>
  <div id='beta'>
    <div id='gamma'>
      <div id='delta'>
        this is delta
      </div>
    </div>
  </div>
</div>
<p>
When user clicks on delta element the output of my click handler is this:
</p>
<pre>
  event target id delta
  currentTarget id gamma
  this  &lt; div id="gamma">...&lt;/div>;
  
</pre>
<p>
  So event.target points to the actual element clicked upon.
  whilst currentTarget points to the 'target' element we are binding a function to. However the actual element (alpha) that we are delegating to is not referenced. I find this surprising: I would expect the delegated element to be the current target and the target element to be the target. The actual element that the user clicked on seems like a low level piece of information that I'm not interested in. If I were I would make that my target element?  Imagine I was attaching an event handler to a list. I would be interested in the list element clicked upon, but I would also possibly want to have a reference to the list also.

</p>
<p>
This seems also somewhat contrary to how the native listener works. If I add a handler using addEventListener and click on a descendent element, the value of event.currentTarget points to the element I called addEventListener on.
</p>
<p>
The point of event delegation seems to me to create bind a handler to a 'virtual' element which represents an element that may not even exist at any particular time. This allows the DOM to change without having to rebind event handlers.The element is therefore an abstraction and the precise physical element that the event occurs on is an implementation detail that we should not be concerned with.
</p>
</p>

JavaScript

$('#alpha').on('click', '#gamma', function (event) {

alert('event target id', event.target.id);
 alert('event currentTarget id', event.currentTarget.id);
  alert('this', this)

});