How can I successfully apply event delegation for the mouseenter event?
I've been searching for a way to achieve what this jQuery code does, but I'm struggling to grasp how it works internally:
$(document).on('mouseenter', '.demo', foo);
I came across another question discussing this issue, but unfortunately, a satisfactory solution wasn't provided.
The documentation on Mozilla about mouseenter and event delegation mentions that it's not fully supported by all browsers. The example they presented even throws errors in the console without functioning properly.
I also tested out this codepen example, which failed to work correctly in Chrome (though I haven't checked other browsers).
Do you have any suggestions or insights on this matter?
Here is my current attempt at implementing event delegation, but it appears that the target element continues to bubble up:
document.addEventListener('mouseenter', function(e) {
console.log('==============================');
console.log(e.currentTarget); //document
console.log(e.target); //document
console.log(e.relatedTarget); //nothing
console.log(e.handleObj); //nothing
});
You can experiment with the code in this jsfiddle link.