0

I wrote an event delegation function in javascript:

function matches(el, selector) {
   var test = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);
   if (test)
      return test.call(el, selector);
   return false;
}

function delegation(node, child, evt, fn, limit) {
   node.addEventListener(evt, function (e) {
      //maximum number of ancestors i'm going to check
      limit = limit ? limit : 2;
      e = e || event;
      var target = e.target || e.srcElement, i = 0, fire = false;
      while (target) {
        if (matches(target, child)) {
         //break out of the loop if i find the matching DOM element, then fire the event
         fire = true;
         break;
        }
        if (i > limit) {
         break;
        }
      i++;
      //If event.target doesn't has id/class/tag "child", check its ancestors.
      target = target.parentNode;
      }
      if (fire) {
         fn(target, e);
      }
   }, false);
}

Usage: delegation(document, 'class-or-id-or-tagName', 'event-name', function, query-limit); It works relatively well until I stumbled upon mouse enter and mouse leave events. The problem is that the events are only triggered when my mouse leave or enter document window, not DOM element, I do understand the problem why but I can't seem to fix it. Is there any way to replicate

$(document).on('mouseenter, DOM , function).on('mouseleave', DOM, function);

in pure Javascript.

Edit: Thanks for all the comments, I found out that there's nothing wrong with my code. I just need to use the correct event name when calling the delegation function, mouseenter should be mouseover, mouseleave should be mouseout. Changing from 

delegation(document, '.some-class-name', 'mouseenter', function(){});

to 

delegation(document, '.some-class-name', 'mouseover', function(){});

works wonder.

Yanaro
  • 345
  • 4
  • 16
  • What DOM element are you referring to. Here's a better explanation of the DOM: http://stackoverflow.com/questions/1122437/what-is-dom-element – Richard Chassereau Jul 25 '16 at 04:27
  • I'm referring to event.target, the one that is targetted within document, I find the correct target by checking whether it has class/id/tag with function "matches" – Yanaro Jul 25 '16 at 04:31
  • Could you provide a working example of this code using JSFiddle ( or an online editor of your choice)? – Richard Chassereau Jul 25 '16 at 04:38
  • Perhaps this thread may help: http://stackoverflow.com/questions/17633152/javascript-onclick-event-handling-with-pure-javascript – Richard Chassereau Jul 25 '16 at 04:52
  • Additionally, this guide seemed helpful to me. http://callmenick.com/post/jquery-functions-javascript-equivalents – Richard Chassereau Jul 25 '16 at 05:05
  • Appears to be a bubbling issue. I am not too familiar with event delegation in plain js, so we both learned something. Last reference hopefully... http://stackoverflow.com/questions/8813051/determine-which-element-the-mouse-pointer-is-on-top-of-in-javascript – Richard Chassereau Jul 25 '16 at 05:16
  • I just found the answer to my own question. Apparently, there are events called mouse over and mouse out, which trigger anytime I hover over a child element. – Yanaro Jul 25 '16 at 05:23

0 Answers0