Created
April 12, 2012 18:19
-
-
Save termi/2369790 to your computer and use it in GitHub Desktop.
event delegation. It is nearly 140 bytes but unsafe. For more complex solution see comments
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "delegate", | |
"keywords": ["delegate", "events", "event", "DOM"] | |
} |
Posted more complex, readable and error-proof version with 3 different match filters and handleEvent support
If you don't turn this into a little library, I will :D
More complex and error-proof version is now https://github.com/termi/DelegateListener
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
That's not how you write readable code :P