Skip to content

Instantly share code, notes, and snippets.

@Alexei-B
Last active August 29, 2015 14:27
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 Alexei-B/7b4f11b69c358ffb7c5c to your computer and use it in GitHub Desktop.
Save Alexei-B/7b4f11b69c358ffb7c5c to your computer and use it in GitHub Desktop.

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
Copy link
Author

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