Skip to content

Instantly share code, notes, and snippets.

@Alexei-B Alexei-B/LICENSE.txt
Last active Aug 29, 2015

Embed
What would you like to do?

Delegate Events - 140byt.es

An implementation of delegation, based on jQuery's .on() function.

Check out the demo here: http://jsbin.com/joxeji/edit?html,output

Usage

delegate (
	node,		// The node to delegate the event to.
	event,		// The event (I.E. "click").
	handler,	// A function to handle the event.
	selector,	// CSS selector to match the target child nodes.
	[data]		// [optional] Data to pass on to the handler function.
)

Author

Created by Alexei Barnes (@Alexei_Barnes) at AlexeiBarnes.com.

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

function (
a, // Node to delegate event to (I.E. document)
b, // Event to delegate (I.E. "click")
c, // Event handler function.
d, // CSS selectors to match the target child nodes.
e, // [optional] data to pass on to event handler.
f // (placeholder)
)
{
f = a[ // Cache old event.
b = "on" + b // Prepend "on" to event name.
];
a[b] = function (g) { // Set event to new function.
if (g.target.matches(d)) // If we have a match for the selector
c.call(g.target, g, e); // then call the event handler and pass on event and data.
f ? f(g) : 0 // Chain call the cached event if there was one.
}
}
function(a,b,c,d,e,f){f=a[b="on"+b];a[b]=function(g){if(g.target.matches(d))c.call(g.target,g,e);f?f(g):0}}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2015 Alexei Barnes <alexeibarnes.com>
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": "delegateEvent",
"description": "Allows the delegation of event handlers to parents.",
"keywords": [
"event",
"events",
"eventhandler",
"delegate"
]
}
<!DOCTYPE html>
<title>Foo</title>
<div>Expected value: <b>Handled</b></div>
<script>
var delegate = function(a,b,c,d,e,f){f=a[b="on"+b];a[b]=function(g){if(g.target.matches(d))c.call(g.target,g,e);f?f(g):0}}
// Create event handler to set "Actual value".
delegate(document, "click", function() { // Delegate the event to the document.
this.innerHTML = "Handled"; // Set html of element that triggers the event.
}, "b#ret"); // Looking for bold tags with id "ret".
</script>
<!-- Add the element after delegation to show that event handling is delegated properly. -->
<div>Actual value: <b id="ret"></b></div>
<script>
// Trigger event.
document.getElementById("ret").dispatchEvent(new Event("click", {bubbles: true}));
</script>
@Alexei-B

This comment has been minimized.

Copy link
Owner Author

commented Aug 23, 2015

Improved this by using .matches which is now fairly well supported. If your browser is up to date then as of writing only opera mini and IE will not run this code.

Note that even with a polyfill for matches IE will not run this code because for some reason the event target is not an Element.

Info: http://caniuse.com/#search=matches

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.