Event targeting in Vanilla JS vs. in jQuery

Question

I'm doing event targeting experiment and compare its execution in vanilla JS and jQuery. I was surprised that the result was different; it was successful in vanilla JS but not in jQuery. If I'm not mistaken, the code for event targeting in jQuery is $(event.target) and in vanilla JS is event.target. In my experiment, I've only got a button inside the <body> tag, and whenever it is being target by an event, the browser is supposed to alert "button element is target", otherwise it will be "window itself is targeted". But the alert notification was only "window itself is targeted" even if the targeted element is the button. Here is my code:

Vanilla JS

let $ = document.querySelector.bind(document);

window.onclick = function(event) {
    if(event.target != $('button')) {
        alert('window itself is targeted');
    } else {
        alert('button element is targeted');
    }
}

jQuery

$(window).on('click', function(event) {
    var $eventTarget = $(event.target);

    if($eventTarget != $('button')) {
        alert('window itself is targeted');
    } else {
        alert('button element is targeted');
    }
});

In jQuery code, I tried to replace the $(event.target) with event.target to see if its execution would be similar to vanilla JS, but nothing changed. Is it the grammar of my code that makes it fail or is there something else wrong that I just don't notice. I hope someone could point it out to me.

score 2 · Answer 1 · edited Mar 16 '22 at 09:04

2

Because $('button') and $(event.target), even if they refer to the same Button, they are not the same Object.

The correct way to compare two dom elements using jQuery is to compare their tag / class / id or any other attribute

alert($(event.target) == $(event.target)); // false (same target, different jQuery objects)

alert($('button') == $('button')); // false (same button, different jQuery objects)

alert($(event.target).is('button')); // true (comparing element tags)

alert($(event.target).attr('id') == 'buttonId'); // true (comparing element ids)

alert($(event.target).hasClass('buttonClass')); // true (comparing element classes)

DEMO

edited Mar 16 '22 at 09:04

Glorfindel

21,988
13
81
109

answered Dec 15 '16 at 09:32

Alexandru Severin

6,021
11
48
71

so `is()` method is the solution – jst16 Dec 16 '16 at 06:07
@jst16 Its one solution (in which you compare the html tag of the elements). You can also compare the class, the id, or any other attribute – Alexandru Severin Dec 16 '16 at 06:51

Rory McCrossan · Answer 2 · 2016-12-15T09:39:22.117

Your test is flawed as event.target != $('button') will always be true as you're comparing a DOMElement and a jQuery object, and $eventTarget != $('button') will also always be true as you cannot directly compare objects.

To fix this compare properties of the objects:

// Native:
let $ = document.querySelector.bind(document);
window.addEventListener('click', function(e) {
    if (e.target.id != $('button').id) {
        alert('window itself is targeted');
    } else {
        alert('button element is targeted');
    }
});

Note the preferred use of addEventListener() here, over onclick().

Working native example

// jQuery
$(window).on('click', function(e) {
    if (e.target.id != $('button').prop('id')) {
        alert('window itself is targeted');
    } else {
        alert('button element is targeted');
    }
});

Working jQuery example

Event targeting in Vanilla JS vs. in jQuery

2 Answers2