Event not triggered if using delegation

[netfusion]

Some events do not fire properly when delegation is used.
Examples are mouseenter and mouseleave but there may be more.

Test with cash: https://jsfiddle.net/dyo9xcq0/
Test with jQuery: https://jsfiddle.net/w62utcrj/

(Move the mouse over the elements and watch console output)

[fabiospampinato]

Some events do not bubble, and remember in the case of event delegation we are listening for events on the target element.

So instead of writing:

$("#outer").on("mouseenter", "#inner", function(e) {
  console.log(e.currentTarget);
});

you should be writing:

$("#inner").on("mouseenter", function(e) {
  console.log(e.currentTarget);
});

Of course that takes away the convenience that comes with event delegation if you're adding elements dynamically to the page.

I'm not sure what can be done here, I'll take a look at how jQuery implements this but there's probably nothing that we can do, they are basically rewriting the event system themselves.

[netfusion]

A common use case would be a tooltip system which relies on attributes present on any kind of element.

$("body").on("mouseenter", "[data-tooltip-content]", function(e) {
    $("#tooltip").text($(this).data("tooltipContent"));  
});

Im my case I am using an MutationObserver now.

Maybe cash could use a MutationObserver to attach the delegated event handlers to matching newly created DOM elements instead of attaching them to the parent and cycling the DOM. This would solve this issue as well as #235.

[fabiospampinato]

Mutation Observers aren't available in IE10. This sounds interesting though, I'll see what can be done 👍

[fabiospampinato]

Fixed in 872f79d. I'll publish a new beta as soon as I fix as few other problems.

It turned out that there are some events that do not bubble, and weirdly enough there are alternative events for them that do the same thing except that they bubble 🤷‍♂️

focus -> focusin
blur -> focusout
mouseenter -> mouseover
mouseleave -> mouseout

[fabiospampinato]

Btw this code:

$("body").on("mouseenter", "[data-tooltip-content]", function(e) {
    $("#tooltip").text($(this).data("tooltipContent"));  
});

Should have awful performance. mouseenter/mousover che fire tens of times every time you move the mouse. Also we have to traverse up the tree until we reach the body to check if any of those elements match [data-tooltip-content], which is on its own a slow selector.

You should instead find all those elements once, and maybe listen for the addition of other elements to the dom that match that selector (like you seem to be doing now?).