Question

我正在进行事件定位实验并比较它在vanilla JS和jQuery中的执行情况。我很惊讶结果不同;它在vanilla JS中取得了成功，但在jQuery中却没有。如果我没有弄错的话，jQuery中事件定位的代码是$(event.target)，而vanilla JS中的代码是event.target。在我的实验中，我只在<body>标记内部有一个按钮，每当它被某个事件作为目标时，浏览器就会发出警告＆＃34;按钮元素是目标＆＃34;，否则它将是＆＃34;窗口本身就是目标＆＃34;。但警报通知只是＆＃34;窗口本身就是目标＆＃34;即使目标元素是按钮。这是我的代码：

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');
    }
});

在jQuery代码中，我尝试用$(event.target)替换event.target以查看它的执行是否与vanilla JS类似，但没有任何改变。这是我的代码的语法使它失败或是否有其他错误，我只是没有注意到。我希望有人可以向我指出。

Answer 1

因为$('button')和$(event.target)，即使它们引用相同的Button，它们也不是同一个对象。

使用jQuery比较两个dom元素的正确方法是比较它们的标记/类/ id或任何其他属性

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

Answer 2

您的测试存在缺陷，因为您在比较DOMElement和jQuery对象时始终为event.target != $('button')，并且$eventTarget != $('button')也将始终为真，因为您无法直接比较对象。< / p>

要修复此对象的属性：

// 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');
    }
});

请注意此处addEventListener()优先使用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

在Vanilla JS和jQuery中的事件定位

2 个答案: