termi/event_delegation.js

## event_delegation.js
function(
  a,    //CSS selector
  b     //callback function
) {
  return function(
    e,  // event
    c,  // (placeholder)
    d   // (placeholder)
  ) {
    d = e.target;

    do d.matchesSelector(a) &&  //Match current node | alternative: match(d, a)
      (c = b.call(d, e))        // executes callback | "this" is maches node
    while (
      c !== !1 &&               // if callback return false, stop bubbling
      d != this &&              // stop element
      (d = d.parentNode)
    );
    return c                    // return result from last callback execution
  }
};

## example.html
<html>

<style>
div {
  height: 40px;
  margin: 40px 0;
  background-color: red;
}
div.A {
  background-color: green;
}
</style>

<c id=test>
 <div class=A>s</div>
 <br>
 <div class=B>s</div>
 <br>
 <div class="A C">s</div>
</c>

<script>
if(!Element.prototype.matchesSelector) {
  Element.prototype.matchesSelector =
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector || function(selector) {
      if(!selector)return false;
      if(selector === "*")return true;

      var thisObj = this,
        parent,
        i,
        str,
        tmp,
        match = false;

      if(/^[\w#\.][\w-]*$/.test(selector) || /^(\.[\w-]*)+$/.test(selector)) {
        switch (selector.charAt(0)) {
          case '#':
            return thisObj.id === selector.slice(1);
          break;
          case '.':
            match = true;
            i = -1;
            tmp = selector.slice(1).split(".");
            str = " " + thisObj.className + " ";
            while(tmp[++i] && match) {
              match = !!~str.indexOf(" " + tmp[i] + " ");
            }
            return match;
          break;
          default:
            return thisObj.tagName && thisObj.tagName.toUpperCase() === selector.toUpperCase();
        }
      }
      parent = thisObj.parentNode;

      if(parent && parent.querySelector) {
        match = parent.querySelector(selector) === thisObj;
      }

      if(!match && (parent = thisObj.ownerDocument)) {
        tmp = parent.querySelectorAll(selector);
          for (i in tmp ) if(_hasOwnProperty(tmp, i)) {
              match = tmp[i] === thisObj;
              if(match)return true;
          }
      }
        return match;
    }
}

function delegate(a,b){return function(e,c,d){d=e.target;do d.matchesSelector(a)&&(c=b.call(d,e));while(c!==!1&&d!=this&&(d=d.parentNode));return c}};

test.addEventListener("click", delegate(".A", function(e){console.log(e)}))
</script>

## index.js
function(a,b){return function(e,c,d){d=e.target;do d.matchesSelector(a)&&(c=b.call(d,e));while(c!==!1&&d!=this&&(d=d.parentNode));return c}};

## package.json
{
  "name": "delegate",
  "keywords": ["delegate", "events", "event", "DOM"]
}
	function(
	a, //CSS selector
	b //callback function
	) {
	return function(
	e, // event
	c, // (placeholder)
	d // (placeholder)
	) {
	d = e.target;

	do d.matchesSelector(a) && //Match current node \| alternative: match(d, a)
	(c = b.call(d, e)) // executes callback \| "this" is maches node
	while (
	c !== !1 && // if callback return false, stop bubbling
	d != this && // stop element
	(d = d.parentNode)
	);
	return c // return result from last callback execution
	}
	};
	<html>

	<style>
	div {
	height: 40px;
	margin: 40px 0;
	background-color: red;
	}
	div.A {
	background-color: green;
	}
	</style>

	<c id=test>
	<div class=A>s</div>
	<br>
	<div class=B>s</div>
	<br>
	<div class="A C">s</div>
	</c>

	<script>
	if(!Element.prototype.matchesSelector) {
	Element.prototype.matchesSelector =
	Element.prototype.webkitMatchesSelector \|\|
	Element.prototype.mozMatchesSelector \|\|
	Element.prototype.msMatchesSelector \|\|
	Element.prototype.oMatchesSelector \|\| function(selector) {
	if(!selector)return false;
	if(selector === "*")return true;

	var thisObj = this,
	parent,
	i,
	str,
	tmp,
	match = false;

	if(/^[\w#\.][\w-]$/.test(selector) \|\| /^(\.[\w-])+$/.test(selector)) {
	switch (selector.charAt(0)) {
	case '#':
	return thisObj.id === selector.slice(1);
	break;
	case '.':
	match = true;
	i = -1;
	tmp = selector.slice(1).split(".");
	str = " " + thisObj.className + " ";
	while(tmp[++i] && match) {
	match = !!~str.indexOf(" " + tmp[i] + " ");
	}
	return match;
	break;
	default:
	return thisObj.tagName && thisObj.tagName.toUpperCase() === selector.toUpperCase();
	}
	}
	parent = thisObj.parentNode;

	if(parent && parent.querySelector) {
	match = parent.querySelector(selector) === thisObj;
	}

	if(!match && (parent = thisObj.ownerDocument)) {
	tmp = parent.querySelectorAll(selector);
	for (i in tmp ) if(_hasOwnProperty(tmp, i)) {
	match = tmp[i] === thisObj;
	if(match)return true;
	}
	}
	return match;
	}
	}

	function delegate(a,b){return function(e,c,d){d=e.target;do d.matchesSelector(a)&&(c=b.call(d,e));while(c!==!1&&d!=this&&(d=d.parentNode));return c}};

	test.addEventListener("click", delegate(".A", function(e){console.log(e)}))
	</script>
	{
	"name": "delegate",
	"keywords": ["delegate", "events", "event", "DOM"]
	}