85534

Custom Javascript EventManager - please help me complete

I am trying to create a custom javascript EventManager class. I've adopted the format Grant Skinner uses in his easel.js framework for creating the class and need to stick with it. I'm really just kind of lost at this point - I think that - at least in a conceptual sense - I have the right idea here and that it's mostly scope issues that evade me.

I'm hoping someone here can help me take this to the point where addListener and dispatchEvent are functional.

[code] (function(window) { var EventManager = function() { this.initialize(); } var p = EventManager.prototype; // place properties here // Constructor p.initialize = function() { p.listeners = new Array(); } // public methods p.addListener = function(fn, event) { console.log("p.addListener Hit"); console.log("event: " + event); console.log("handler function: " + fn); if(!this.listeners[event]) { this.listeners[event] = []; } if(fn instanceof Function) { this.listeners[event].push(fn); } return this; } p.dispatchEvent = function(event, params) { console.log("Dispatch Event"); // loop through listeners array for(var index = 0; index < listeners[ev].length; index++) { // execute matching 'event' - loop through all indices and // when ev is found, execute listeners[event][index].apply(window, params); } } p.removeListener = function(event, fn) { // split array 1 item after our listener // shorten to remove it // join the two arrays back together } window.EventManager = EventManager; }(window)); [/code] [code] <script> eventManager = new EventManager(); var FooTest = function() { this.fire = function() { //alert("fire"); } this.fire(); }; function onFire() { // console.log("FIRED!"); } var o = new FooTest(); eventManager.addListener.call("fire", onFire ); // eventManager.dispatchEvent.call(o,'fire' ); </script> [/code]

Thank you for your help!!!

Answer1:

Here's a working example of fixed code: http://jsfiddle.net/JxYca/3/

For the most part your code was working, just a few small problems here and there. IFFE is Immediately-Invoked Function Expression (IIFE). This is what you were doing with the whole function(window) {}(window). However in this case it's absolutely unnecessary and just pollutes the code. There's no such thing as hashtable in javascript, however, you can just use an object instead of it. The names of the properties become a key and their value is now value of the hashtable.

An additional and sort of unrelated though for you. This way of doing events in nice, but if you have, say, 3 handlers attached to an event, and second one fails with JavaScript exception, third one will never get executed. You might want to take a quick look at how prototype.js does events here: https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/event.js Their events are non-blocking.

Recommend

  • How to emulate integrated numeric keypad cursor keys in linux
  • jQuery file download plugin
  • javascript variables, What does var x = a = {} do?
  • How do you keep a running instance for Google App Engine
  • if some function is not optimized does it mean that all functions where it is declared are not optim
  • Making header act like google chrome mobile app address bar
  • Why doesn't a local variable live long enough for thread::scoped?
  • WordPress > setting permalink option via script buggy?
  • Android onKey w/ virtual keyboard
  • Excel's Macro-Recorder usage
  • Detect when Facebook like button is clicked
  • AJAX Html Editor Extender upload image appearing blank
  • How to use carriage return with multiple line?
  • d3 v4 drag and drop with TypeScript
  • JQuery Internet Explorer and ajaxstop
  • Debugging ASP.NET on a built-in web server suddenly stops
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • swift auto completion not working in Xcode6-Beta
  • Is there a amazon webstore API for customers?
  • How to get a value (ex: baseURL) in every Karate feature?
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Finding past revisions of files in StarTeam w/ .NET SDK / C#
  • Perl system calls when running as another user using sudo
  • How can I use Kendo UI with Razor?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • Weird JavaScript statement, what does it mean?
  • How to pass list parameters for each object using Spring MVC?
  • Cannot Parse HTML Data Using Android / JSOUP
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • C# - Getting references of reference
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • JTable with a ScrollPane misbehaving
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • need help with bizarre java.net.HttpURLConnection behavior
  • Linking SubReports Without LinkChild/LinkMaster
  • unknown Exception android
  • failed to connect to specific WiFi in android programmatically
  • How can I use threading to 'tick' a timer to be accessed by other threads?