Skip to content
Cross Framework JavaScript Event Delegation
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
vendor
README.markdown

README.markdown

To use delegatejs with prototype include:

<script type="text/javascript" src='delegate-generic.js'></script>
<script type="text/javascript" src='delegate-prototype.js'></script>

in you HTML.

To use delegatejs with mootools include:

<script type="text/javascript" src='delegate-generic.js'></script>
<script type="text/javascript" src='delegate-mootools.js'></script>

Now you can do event delegation in the following way:

<html>
	<head>
		<title>Event Delegation with Prototype</title>
		<script type="text/javascript" src='prototype.js'></script>
		<script type="text/javascript" src='delegate-generic.js'></script>
		<script type="text/javascript" src='delegate-prototype.js'></script>
		<script type="text/javascript">
			document.observe('dom:loaded', function() {
				$('someDIV').delegate('submit', '.dont-submit', function(event){
					event.stop();
					alert('The form was not submitted!');
				});
			});
		</script>
	</head>
	<body>
		<div id="someDIV">
			<form class="dont-submit">
				<input type="submit" value="Submit">
			</form>
			<form class="dont-submit">
				<input type="submit" value="Submit">
			</form>
		</div>
	</body>
</html>

delegatejs works for submit, change, focus and blur event - as well as all bubbling events.

Please check out the tests for more examples, or read my blog entry.

You can’t perform that action at this time.