 <p>I think it is working as it is supposed to. </p> <p>In the mentioned case, event is directly attached to the button, hence currentTarget and target will always be the same. </p> <blockquote> <p><code>$('.container').on('click', '.myButton', function(event) {});</code> does not mean that the event is attached to the div. It is just delegating the event. Meaning, the event will bubble up only till <code>.container</code> and the event is still attached ONLY to <code>.myButton</code></p> </blockquote> <p><strong>Case 1:</strong> If an event is attached to the div </p> <ol> <li>if the button is clicked then the currentTarget would be button and target would be the div.</li> <li>if div is clicked currentTarget would be div and target would also be div</li> </ol> <p><strong>Example</strong></p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.container').on('click', function(event) { console.log(event.currentTarget); console.log(event.target); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>div{ border: 1px solid; width: 150px; height: 150px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="container"&gt; &lt;button class="myButton"&gt;Click Me&lt;/button&gt; Click me &lt;/div&gt;</code></pre> </div> </div> </p> <p><strong>Case 2: (Your case)</strong> If event is attached to button then currentTarget and target would be button always</p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.container').on('click','.myButton', function(event) { console.log(event.currentTarget); console.log(event.target); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>div{ border: 1px solid; width: 150px; height: 150px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="container"&gt; &lt;button class="myButton"&gt;Click Me&lt;/button&gt; Click me &lt;/div&gt;</code></pre> </div> </div> </p>