javascript - Vanilla JS 事件委托(delegate)(不是点击事件)返回的不仅仅是文档对象

Question

我一直在尝试找出一种好方法，将以下代码复制为普通 JS，而无需在文档事件监听器中进行柯里化(Currying)。如何将下面的代码变成普通的 js 事件监听器？

$(document).on('click', 'myElement', function(){
    //do something to myElement
});

理论上是否存在类似于上面的内容

document.addEventListener('click', function(event) {
   if(event.target){
     // do something to myElement
   }
});

请前往Vanilla JS event delegation (NOT A CLICK EVENT) that returns more than the document object对于下面接受的答案的第二部分。

Answer 1

实际上你的jquery block 所做的是监听文档中的任何点击，当有点击时它会检查被点击的元素是否是<myElement> .

您可以使用与此类似的代码执行相同的操作:

document.addEventListener('click', function(event) {
        if(event.target.nodeName == 'myElement'.toUpperCase()) {
        // do something to myElement
    }
});

更新

为了让答案随着问题的变化而更新，我添加了一个示例来演示 mouseover 之间的差异和mouseenter :

Works much better with snippet in full-screen mode

document.addEventListener('mouseover', function(event) {
    console.log('mouseover '+ event.target.id);
    if(event.target.nodeName == 'myElement'.toUpperCase()) {
        // do something to myElement
    }
});

document.addEventListener('mouseenter', function(event) {
    console.log('mouseenter '+ event.target.id);
    if(event.target.nodeName == 'myElement'.toUpperCase()) {
        // do something to myElement
    }
});

html, body {
  margin: 0;
  padding: 0;
}
div {
  margin: 15px;
  padding: 15px;
  border: 1px dotted blue;
}
body > div {
  margin: 0;
}
div div {
  border-color: red;
}
div div div {
  border-color: green;
}
  
  

<div id="outer1"> Outer 1
  <div id="outer2"> Outer 2
    <div id="inner"> Inner </div>
  </div>
</div>

请注意mouseenter事件将仅触发一次(对于 document 对象)，而 mouseover document 内元素的每次更改都会触发事件(这会发生在 dom 树中的每个元素上)。

As for jQuery

jQuery 克服这种行为的方式来实现这一点

$(document).on('mouseenter', 'myElement',

工作，是他们改变了mouseenter事件至mouseover (在 document 上)，他们进行内部检查以查看事件是否是 mouseover或mouseenter上myElement .