mouseenter delegation using vanilla JavaScript?

Question

How do I implement event delegation for the mouseenter event?

I'm looking for the equivalent to this jQuery code, but didn't manage to understand how jQuery does it internally:

$(document).on('mouseenter', '.demo', foo);

I've seen this other question about it, but no proper solution was provided.

I've also read Mozilla docs regarding mouseenter and delegation, and besides saying it's not compatible with any browser, the example they provided throws error on the JS console and doesn't work.

I've also checked this codepen, which doesn't work on Chrome either (didn't try other browsers).

Any idea?

This is what I'm trying so far, but the target element seems to always 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 play with it in this jsfiddle.

Answer 1

You have to add the event listener on capturing phase, passing true as third argument:

document.body.addEventListener("mouseenter", function(e) {
    if(e.target.className === "demo") {
        console.log("catched");
    }
},true); // capturing phase

You can do something of more elaborated in order to catch the selector. But that's the key.

Demo here https://codepen.io/anon/pen/Xqaxwd