Question

我一直试图找出一种很好的方法来将以下代码复制为vanilla JS，而不会在文档事件监听器中进行curry。将以下代码制作成vanilla 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块所做的就是监听文档中的任何点击，当点击它时，它会检查被点击的元素是否为<myElement>。

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

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

更新

为了让答案与问题的更改保持同步，我添加了一个示例来演示mouseover和mouseenter之间的差异：

在全屏模式下使用代码段更好用

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，mouseenter事件只会触发一次（对于document对象），而mouseover事件将触发document事件中的每个元素更改{1}}（这将发生在dom树中每个元素）。

至于jQuery

jQuery克服此行为的方式来实现这个

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

工作，是他们将mouseenter事件更改为mouseover（document）并进行内部检查以查看事件是mouseover还是{ {1}}上{1}}。

Answer 2

以下是使用纯JavaScript的解决方案：

document.getElementById("someId").addEventListener("click", doSomething);

function doSomething() {
    // whatever you like...
}

Vanilla JS事件委托（非点击事件）返回的不仅仅是文档对象

2 个答案:

更新