pixelhandler/index.html

## index.html
<!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>

## script.js
// 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);
	<!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 →" 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);