http://blog.xilinus.com/2007/4/13/simple-event-notifier-class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Xilinus Blog: Simple event notifier class</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <!-- Use this RSS link if you are using FeedBurner (recommended) -->
  <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/XilinusBlog" />
  <!-- Include Mephisto's default RSS feed -->
  

  <script src="/javascripts/prototype.js" type="text/javascript"></script>
  <link href="/stylesheets/application.css" rel="stylesheet" type="text/css" />
  <script src="/javascripts/code_highlighter.js" type="text/javascript"></script>
  <script src="/javascripts/javascript.js" type="text/javascript"></script> 
  <script src="/javascripts/html.js" type="text/javascript"></script> 
  <script src="/javascripts/css.js" type="text/javascript"></script> 
  <script src="/javascripts/ruby.js" type="text/javascript"></script> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-667244-8";
urchinTracker();
</script>

</head>
<body>
<div id="container">
  <div id="page">
    <div id="header-noshadow"></div>
    
    <div id="header">
      <h1 ><a href="/">Xilinus Blog</a></h1>
<p style="display:none;float:right; margin-top:-100px"><a href="http://feeds.feedburner.com/XilinusBlog"><img src="http://feeds.feedburner.com/~fc/XilinusBlog?bg=CC0000&amp;fg=000000&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p>    </div> 
    
    <div id="subheader">
          <form action="/search" id="sform" method="get" name="sform" style="float:right; margin-top:1px; margin-right:10px">
            <p>Search : <input type="text" id="q" name="q" value="" /></p>
	  </form>

</div>
    
    <div id="content">
      
  
<!--
<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
  xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
  rdf:about=""
  trackback:ping=""
  dc:title="Simple event notifier class"
  dc:identifier="/2007/4/13/simple-event-notifier-class"
  dc:description="<p>For <a href="http://prototype-graphic.xilinus.com/">Prototype Graphic Framework</a> I needed a simple class to send event to any registered objects. I did not want to have add/remove observers and fire events on each class that needed it.</p>

..."
  dc:creator="admin"
  dc:date="avril 13, 2007 11:26" />
</rdf:RDF>
-->

<div class="hentry" id="article-46">
  <h2 class="entry-title">
    <a href="/2007/4/13/simple-event-notifier-class">Simple event notifier class</a>
  </h2>
  <div class="vcard">
  
    Posted on <span class="published">avril 13, 2007 </span>
<!--
    
    <span class="comment-count"><a href="/2007/4/13/simple-event-notifier-class">0 comments</a></span>
    !-->
</div>
<abbr class="published" title="2007-04-13T11:26:00+00:00"></abbr>
<!--<br class="clear" />!-->
  <div class="entry-content">
  <p>For <a href="http://prototype-graphic.xilinus.com/">Prototype Graphic Framework</a> I needed a simple class to send event to any registered objects. I did not want to have add/remove observers and fire events on each class that needed it.</p>


	<p>I found few classes on internet like <a href="http://www.someelement.com/2007/03/eventpublisher-custom-events-la-pubsub.html">EventPublisher</a> from Ryan Gahl but I wanted something very lightweight without any dependencies (excepted <a href="http://prototypejs.org">prototype</a>) so I did my own class.</p>


It&#8217;s really simple, I don&#8217;t think we can do simpler but it works :)
Here is the full code (about 15 lines of code!)
<pre><code class="javascript">EventNotifier = {
  observers: new Array(),

  /*
    Function: addObserver
      Registers a new object as observer

    Parameters:
      observer - Observer (should implement message function to be notified)
      sender   - Sender object (default:null) If not null, 
                    observer will only received message from this object
  */
  addObserver: function(observer, sender) {
    sender = sender || null;
    this.removeObserver(observer);
    this.observers.push({observer:observer, sender:sender});
  },

  /*
    Function: removeObserver
      Unregisters an observer

    Parameters:
      observer - Observer 
  */
  removeObserver: function(observer) {  
    this.observers = this.observers.reject(function(o){return o.observer == observer});
  },

  /*
    Function: send
      Send a new message to all registered observers

    Parameters:
      sender    - Sender object (can be null)
      eventName - Event name (observers have to implement this method)
      options   - Object or Hash table (for multiple options) 
                  options of sending event  (default null)
  */
  send: function(sender, eventName, options) {  
    options = options || null;
    this.observers.each( function(o) {
      if ((o.sender == null || o.sender == sender) &amp;&amp; 
          o.observer[eventName]) 
        o.observer[eventName](sender, options);
    });
  }
}</code></pre>

	<p>Now to use it you just need to register any observers like this:</p>


<pre><code class="javascript">var myObserver =  {
  myEvent: function(sender, options) {}
}               
EventNotifier.addObserver(myObserver);</code></pre>

And fire an event like this
<pre><code class="javascript">EventNotifier.send(null, &quot;onCustomEvent2&quot;, {option1: &quot;12&quot;, options2: &quot;kool&quot;);</code></pre>

With this class you can:
	<ul>
	<li>Register an observer to receive events from any senders</li>
		<li>Register an observer to receive events from a specific sender</li>
		<li>Fire an event to registered observers following rules of registration (observer must accept event of the sender and must implement the event function).</li>
	</ul>


	<p>Try it, it works and it has been tested with unit tests (using prototype unit test class)</p>


Download:
	<ul>
	<li><a href="http://blog.xilinus.com/assets/2007/4/13/event_notifier.js">event_notifier.js</a></li>
		<li><a href="http://prototype-graphic.xilinus.com/doc/files/base/event_notifier-js.html">Documentation</a> </li>
		<li>Or download <a href="http://prototype-graphic.xilinus.com/">Prototype Graphic Framework</a> to have also unit tests.</li>
	</ul>
  
</div>
  <p class="article-footer">
  
    Filed under:  <a class="selected" href="/javascript">Javascript</a> |
  
  
    Tagged with: <a href="/tags/javascript" rel="tag">javascript</a>&nbsp;<a href="/tags/Prototype" rel="tag">Prototype</a>&nbsp;<a href="/tags/prototype" rel="tag">prototype</a>&nbsp; |
  
  
    <a href="/2007/4/13/simple-event-notifier-class">0 comments</a>
  
</p>
</div>




<h5>Post a comment</h5>
<form id="comment-form" method="post" action="/2007/4/13/simple-event-notifier-class/comments#comment-form">
<fieldset>
  <legend>Comment</legend>
  <p>
    <label class="text" for="comment_author">Name:</label><br/>
    <input type="text" id="comment_author" name="comment[author]" value="" />
  </p>
  <p>
    <label class="text" for="comment_author_email">Email Address:</label><br />
    <input type="text" id="comment_author_email" name="comment[author_email]" value="" />
  </p>
  <p>
    <label class="text" for="comment_author_url">Website:</label><br />
    <input type="text" id="comment_author_url" name="comment[author_url]" value="" />
  </p>
  <p>
    <label class="text" for="comment_body">Comment:</label><br />
    <textarea id="comment_body" name="comment[body]"></textarea>
  </p>
  <div class="formactions">
    <input type="submit" value="Post comment" class="submit" />
  </div>
</fieldset>
</form>




    </div>

    <div id="sidebar">

      <div class="sidebar-node">
	<h3>About</h3>
	<div class="sidebar-text">
	  <p><center><img src="http://blog.xilinus.com/assets/2007/4/13/proto-small.png"/></center><br/>
My name is Sébastien Gruhier, I live in France. <br/><br/>
I am programmer and I only work with Ruby On Rails/Javascript. <br/><br/>
Check out <a href="http://www.xilinus.com">Xilinus</a> for more details and use its contact form if you want to leave me a message.</p>
	</div>
      </div>
      <div class="sidebar-node">
	<h3>Current Project</h3>
	<div class="sidebar-text">
           <a href="http://www.neomeeting.net"><img src="/assets/2007/3/17/neomeeting.png"/></a>
	</div>
      </div>
      <div class="sidebar-node">
	<h3>Open-Source JS Projects</h3>
	<div class="sidebar-text" style="padding-left:4px">
           <a href="http://prototype-window.xilinus.com/">
             <img src="/assets/2007/3/18/pwc.png" />
           </a>
           <a href="http://prototype-carousel.xilinus.com/">
              <img src="/assets/2007/3/18/carousel.png"/>
           </a>	
           <a href="http://transparent-message.xilinus.com/">
              <img src="/assets/2007/3/18/tm.png"/>
           </a>      
        </div>
      </div>

      <!-- Delete the comment blocks if you'd like to list out your sections -->
      
      <div class="sidebar-node">
        <h3>Sections</h3>
        <div class="sidebar-text">
          <ul>
          
            <li><a class="selected" href="/">Home</a> (8)</li>
          
            <li><a href="/svg-prototype">SVG</a> (6)</li>
          
            <li><a href="/javascript">Javascript</a> (1)</li>
          
          </ul>
        </div>
      </div>
      


      <!-- Delete the comment blocks if you'd like to display links for the monthly archive -->
      

      <!-- Delete the comment blocks if you'd like to list out your tags -->
      
      <div class="sidebar-node">
        <h3>Tags</h3>
        <div class="sidebar-text">
	  <ul>
	  
	    <li><a href="/tags/Canvas" rel="tag">Canvas</a> (2)</li>
	  
	    <li><a href="/tags/javascript" rel="tag">javascript</a> (1)</li>
	  
	    <li><a href="/tags/Prototype" rel="tag">Prototype</a> (3)</li>
	  
	    <li><a href="/tags/SVG" rel="tag">SVG</a> (2)</li>
	  
	    <li><a href="/tags/VML" rel="tag">VML</a> (2)</li>
	  
        </ul>
	</div>
      </div>
      
      <div class="sidebar-node">
        <h3 style="border-bottom:none"></h3>
        <div class="sidebar-text">
 <script type="text/javascript"><!--
google_ad_client = "pub-3593675344652080";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text";
          google_color_border = "EFEAE3";
          google_color_bg = "EFEAE3";
          google_color_link = "A62A2A";
          google_color_text = "000000";
          google_color_url = "A62A2A";

//2007-03-20: ajax, javascript, ruby on rails, svg, prototype
google_ad_channel = "8025923418+8193138037+4188663988+5930441548+1856288225";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
        </div>
      </div>

    </div>
    <div style="clear: both;"></div>
  </div>

  <div id="shadow"></div>
  <div id="footer"><a href="/">Xilinus Blog</a> | powered by <a href="http://www.mephistoblog.com">mephisto</a> | styled with <a href="http://www.benlog.org/projects/reddish">reddish</a></div>
  
</div>

</body>
</html>
