Question

This is a code with jQuery 1.7:

<div class="test">
  <div class="bu">
    <a>
      bu here
    </a>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).on('click', '.test', function () { alert(0); return false; });
$(document).on('click', '.bu', function () { alert(1); return false; });
$(document).on('click', '.bu', function () { alert(2); return false; });
</script>

Xlicking on .test > .bu will alert “1” and alert “2”, but not alerts “0”

My question is: how to do the same WITHOUT jQuery (on native DOM API)? Seems, I can’t do it with Native DOM API without implementing my own library…

Answer 1

<div class="a">
    <div class="b">
      <div class="c" style="border: 1px solid silver; width: 80px; text-align: center;line-height: 80px;">
          click me!
      </div>
    </div>
</div>

<script>

// Element.prototype.matchesSelector
(function (x) {
  var i;
  if (!x.matchesSelector) {
    for (i in x) {
      if (/^\S+MatchesSelector$/.test(i)) {
        x.matchesSelector = x[i];
        break;
      }
    }
  }
}(Element.prototype));

Document.prototype.on =
Element.prototype.on = function (eventType, selector, handler) {
  this.addEventListener(eventType, function listener(event) {
    var t = event.target,
      type = event.type,
      x = [];
    if (event.detail && event.detail.selector === selector && event.detail.handler === handler) {
      return this.removeEventListener(type, listener, true);
    }
    while (t) {
      if (t.matchesSelector && t.matchesSelector(selector)) {
        t.addEventListener(type, handler, false);
        x.push(t);
      }
      t = t.parentNode;
    }
    setTimeout(function () {
      var i = x.length - 1;
      while (i >= 0) {
        x[i].removeEventListener(type, handler, false);
        i -= 1;
      }
    }, 0);
  }, true);
};

Document.prototype.off =
Element.prototype.off = function (eventType, selector, handler) {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent(eventType, false, false, {selector: selector, handler: handler});
  this.dispatchEvent(event);
};

document.on('click', '.b', function () {
  alert(2);
});
document.on('click', '.a', function () {
  alert(1);
});
document.on('click', '.b', function (event) {
  alert(3);
  event.stopPropagation();
});

</script>