Created
October 11, 2010 23:57
-
-
Save pixelhandler/621429 to your computer and use it in GitHub Desktop.
Event Pooling example using jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.