Skip to content

Instantly share code, notes, and snippets.

@pixelhandler
Created October 11, 2010 23:57
Show Gist options
  • Save pixelhandler/621429 to your computer and use it in GitHub Desktop.
Save pixelhandler/621429 to your computer and use it in GitHub Desktop.
Event Pooling example using jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Event Pooling, or perhaps Pub/Sub</title>
<script type="text/javascript" charset="utf-8" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
<strong>Who is this?</strong>
<form action="#" method="get" accept-charset="utf-8" id="whoisit">
<p><label for="name">name</label> <input type="text" name="name" value="" id="name">
</p>
<p><label for="email">email</label> <input type="email" name="email" value="" id="email">
</p>
<p><input type="submit" value="Continue &rarr;" id="submit"></p>
</form>
</body>
<script type="text/javascript" charset="utf-8" src="script.js"></script>
</html>
// Event pooling script
(function($) { // $ is jQuery
var eventpooling = function() {
// broadcast events on elements
$('#name').bind('blur', function(event) {
$(document).trigger('NAME_CHANGED',event.target);
});
$('#email').bind('blur', function(event) {
$(document).trigger('EMAIL_CHANGED',event.target);
});
$('#submit').bind('click', function(event) {
$(document).trigger('SUBMIT_CLICKED',event);
});
// Pool events on document
$(document).bind('NAME_CHANGED EMAIL_CHANGED SUBMIT_CLICKED', function(event) {
//Handler(s)
$.log(event.type);
})
.bind('NAME_CHANGED', function(event, obj) {
//Handler(s)
nameChangedHandler(event, obj);
})
.bind('EMAIL_CHANGED', function(event, obj) {
//Handler(s)
emailChangedHandler(event, obj);
})
.bind('SUBMIT_CLICKED', function(event) {
//Handler(s)
alert("form valid? "+submitClickHandler(event));
});
// properties
var IS_NAME_VALID, IS_EMAIL_VALID;
// Common methods
function responder(str) {
var response = "Are you really named: ";
return response + str;
}
function readyToSubmit() {
var ready = (IS_NAME_VALID === true && IS_EMAIL_VALID === true) || false;
if (ready === true) {
$('#submit').removeAttr('disabled');
}
return ready;
}
// validation methods
function validater(event,obj) {
$.log('validating: '+ event.type);
var valid = false;
var $obj = $(obj);
$obj.str = $obj.val();
$.log('value: '+ $obj.str);
if (event.type == 'NAME_CHANGED') {
valid = notEmpty($obj.str);
IS_NAME_VALID = valid;
}
if (event.type == 'EMAIL_CHANGED') {
if (notEmpty($obj.str) && validEmail($obj.str)) {
valid = true;
IS_EMAIL_VALID = valid;
}
}
$.log('valid field: '+ valid);
return readyToSubmit();
}
function notEmpty(str) {
if (str!=='') {
return true;
} else {
return false;
}
}
function validEmail(elmValue){
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elmValue);
}
// Event handlers
function submitClickHandler(event) {
validater(event);
return readyToSubmit();
}
function nameChangedHandler(event, obj) {
var name = $(obj).val();
$.log(responder(name));
validater(event,obj);
}
function emailChangedHandler(event, obj) {
var email = $(obj).val();
alert('please confirm your email: '+ email);
validater(event,obj);
}
// initialize behavior
var init = (function(){
$('#submit').attr('disabled', 'disabled');
})();
return init;
};
// debugging methods
$.fn.debug = function() {
return this.each(function(){
alert(this);
});
};
$.log = function(message) {
if(window.console) {
console.debug(message);
} else {
alert(message);
}
};
// doc ready
$(function() {
try {
eventpooling();
} catch(oops) {
$.log(oops);
}
});
})(jQuery);
@pixelhandler
Copy link
Author

Example of using custom events in jQuery for event pooling. Elements broadcast (trigger) events and the document listens (binds) responding with calls to handlers based on. So, the methods to handle the events are loosely coupled with the UI elements and their behaviors. Other developer have called this type of bind and trigger as pub/sub.

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