Skip to content

Instantly share code, notes, and snippets.

@termi
Forked from 140bytes/LICENSE.txt
Created May 1, 2012 17:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save termi/2569872 to your computer and use it in GitHub Desktop.
Save termi/2569872 to your computer and use it in GitHub Desktop.
event delegation
function(
a, //CSS selector
b //callback function
) {
return function(
e, // event
c, // (placeholder)
d // (placeholder)
) {
for( d = e.target ;
d &&
c !== !1 && // if callback return false, stop bubbling
d != this // stop element
; d = d.parentElement) // for FF < 9 use 'parentNode'
d.matchesSelector(a) && //Match current node | alternative: match(d, a)
(c = b.call(d, e)); // executes callback | "this" is maches node
return c // return result from last callback execution
}
}
function(e,f){return function(c,b,a){for(a=c.target;a&&!1!==b&&a!=this;a=a.parentElement)a.matchesSelector(e)&&(b=f.call(a,c));return b}}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "event delegation",
"description": "delegation event listener like jQuery.delegate",
"keywords": [
"event",
"delegation",
"unsafe",
"matchesSelector"
]
}
<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>
//https://gist.github.com/2369850
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(e,f){return function(c,b,a){for(a=c.target;a&&!1!==b&&a!=this;a=a.parentElement)a.matchesSelector(e)&&(b=f.call(a,c));return b}}
test.addEventListener("click", delegate(".A", function(e){console.log(this)}))
</script>
@maettig
Copy link

maettig commented May 7, 2012

Isn't it possible to save a few bytes by replacing while(c!==!1&&d!=this&&(d=d.parentNode)); with for(;c!==!1&&d!=this;)d=d.parentNode;? Oh, wait, it's not. This is a do-while loop. Don't see this very often. Good work.

@termi
Copy link
Author

termi commented May 9, 2012

@maettig Yes we can! Thx for the advice. Update gist

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment