javascript - live addEventListener 鼠标输入

Question

我有 jQuery 的代码:

$(document).on("mouseenter","a",function(e){
    //...
});

如何使用原生 JavaScript(不使用 jQuery)创建相同的内容？

我只需要 Chrome 兼容。

Answer 1

对于相同的功能，您可以将多个事件监听器添加到单个元素，请使用以下内容:

addEventListener('mouseover', function(e) {
    if (e.target instanceof HTMLAnchorElement) {
        //...
    }
});

这将完全相同。对于其他选择器:

addEventListener('mouseover', function(e) {
    if (e.target instanceof HTMLAnchorElement) {
        //matches if the element is an <a>
    }
    if (e.target.className.match(/(\s|^)foobar(\s|$)/)) {
        //matches if the element has the class "foobar" in its classes list
    }
    if (e.target.id == 'baz') {
        //matches if the element has an id of "baz"
        //same syntax works for attributes like 'name', 'href', 'title', etc.
    }
    if (e.target instanceof HTMLLabelElement && e.target.attributes.for.value == 'baz') {
        //matches a <label> tag that has its 'for' attribute set to 'baz'
        //the element.attributes.attrName.value is the syntax for getting the value
        //    of any attribute that isn't available otherwise
    }
});

委托(delegate) mouseenter 事件的问题在于，它仅在应用它的元素悬停时触发。换句话说，如果您将 mouseenter 事件附加到文档，就像在您的 jQuery 代码中一样，它只会在用鼠标输入 document 时触发，但不会为任何子级触发。要让它对 child 起作用，您需要使用 mouseover。