我一直在尝试找出一种好方法,将以下代码复制为普通 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对于下面接受的答案的第二部分。
最佳答案
实际上你的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
.
关于javascript - Vanilla JS 事件委托(delegate)(不是点击事件)返回的不仅仅是文档对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38925544/