By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,944 Members | 1,449 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,944 IT Pros & Developers. It's quick & easy.

Two problems with "addEvent()" code

RMWChaos
100+
P: 137
I grabbed this "Rock Solid addEvent" code from this site, which is based on Mark Wubben's event-cache code. (These links for reference only.)

I am having two problems with it, and the webmaster is s...l...o...w to respond. So I thought I would ask about it here. If I knew more about how this code works, I could probably figure out most of the problems myself, but with this one, I am clueless! =D

First question: This may be my own unfamiliarity with attachEvent(), but I cannot seem to use addEvent() for onclick, onmouseover, and onmouseout. I tried just using attachEvent() directly, but got an error message that "object type does not support this method". Well, [insert favorite expletive here]!! So this code does not work for me:

Expand|Select|Wrap|Line Numbers
  1. addEvent(nodeid, 'click', myFunc);
  2.  
Second question: Why can I not pass a value in the function using this code? Example, I get an error with this:

Expand|Select|Wrap|Line Numbers
  1. addEvent(window, 'load', myFunc(value));
  2.  
And without further ado, here be the code (a long and nasty bugger):
Expand|Select|Wrap|Line Numbers
  1. function addEvent(obj, type, fn)
  2.      {
  3.      if (obj.addEventListener) // FireFox, NN, Mozilla, etc.
  4.           {
  5.           obj.addEventListener(type, fn, false);
  6.           // bugzilla bug #241518
  7.           EventCache.add(obj, type, fn);
  8.           }
  9.      else if (obj.attachEvent) // MSIE
  10.           {
  11.           var func = function()
  12.                {
  13.                fn.apply(window.event.srcElement);
  14.                };
  15.           obj.attachEvent("on" + type, func);
  16.           EventCache.add(obj, type, func);
  17.           }
  18.      else if (typeof obj['on' + type] != 'function')
  19.           {
  20.           obj['on' + type] = fn;
  21.           }
  22.      else // really old
  23.           {
  24.           var oldonload = obj['on' + type];
  25.           obj['on' + type] = function()
  26.                {
  27.                oldonload();
  28.                fn();
  29.                };
  30.           };
  31.      };
  32.  
  33. function removeEvent(obj, type, fn)
  34.      {
  35.      EventCache.remove(obj, type, fn);
  36.      };
  37.  
  38. var EventCache = function()
  39.      {
  40.      var listEvents = [];
  41.      return {
  42.           listEvents : listEvents,
  43.           add : function(node, sEventName, fHandler)
  44.                {
  45.                listEvents.push(arguments);
  46.                },
  47.           remove : function(node, sEventName, fHandler)
  48.                {
  49.                var i, item;
  50.                for(i = listEvents.length - 1; i >= 0; i = i - 1)
  51.                     {
  52.                     if(node == listEvents[i][0] && sEventName == listEvents[i][1] && fHandler == listEvents[i][2])
  53.                          {
  54.                          item = listEvents[i];
  55.                          if(item[0].removeEventListener)
  56.                               {
  57.                               item[0].removeEventListener(item[1], item[2], item[3]);
  58.                               };
  59.                          if(item[1].substring(0, 2) != "on")
  60.                               {
  61.                               item[1] = "on" + item[1];
  62.                               };
  63.                          if(item[0].detachEvent)
  64.                               {
  65.                               item[0].detachEvent(item[1], item[0][sEventName+fHandler]);
  66.                               };
  67.                          item[0][item[1]] = null;
  68.                          };
  69.                     };
  70.                },
  71.           flush : function()
  72.                {
  73.                var i, item;
  74.                for(i = listEvents.length - 1; i >= 0; i = i - 1)
  75.                     {
  76.                     item = listEvents[i];
  77.                     if(item[0].removeEventListener)
  78.                          {
  79.                          item[0].removeEventListener(item[1], item[2], item[3]);
  80.                          };
  81.                     if(item[1].substring(0, 2) != "on")
  82.                          {
  83.                          item[1] = "on" + item[1];
  84.                          };
  85.                     if(item[0].detachEvent)
  86.                          {
  87.                          item[0].detachEvent(item[1], item[2]);
  88.                          };
  89.                     item[0][item[1]] = null;
  90.                     };
  91.                }
  92.           };
  93.      }();
  94.  
Oh, and one last question...why the () at the very end of this code?
Nov 23 '07 #1
Share this Question
Share on Google+
1 Reply


Dasty
Expert 100+
P: 101
The whole problem is about mixing 2 different things. You have to make clear when you are working with references to objects/functions and when you are working just with their results. As we may know:

Expand|Select|Wrap|Line Numbers
  1. myFunc   // is just reference to function with "myFunc" name
  2. myFunc() // is result of executing myFunc function
While keeping this in mind, we can answer most of your questions. addEvent(obj, type, fn) function is expecting 3 attributes
obj - REFERENCE to the DOM object
type - string representation of event name (without 'on')
fn - REFERENCE to your event handler function

So, first answer:
Expand|Select|Wrap|Line Numbers
  1. addEvent(nodeid, 'click', myFunc);
use
Expand|Select|Wrap|Line Numbers
  1. addEvent(document.getElementById('nodeid'), 'click', myFunc);
Second answer:
Expand|Select|Wrap|Line Numbers
  1. addEvent(window, 'load', myFunc(value));
In this calling, JS will execute myFunc function first and send it's return value as 3th parameter to addEvent function. So while your myFunc function is not returning reference to any other function, this code is invalid.

Third answer:
"why the () at the very end of this code"

Simple, creator dont want to assign function reference to EventCache. He wants to assign result of function execution to EventCache. Think of it that way:

Expand|Select|Wrap|Line Numbers
  1. var EventCache;
  2.  
  3. anonymousfunction = function()
  4. {
  5.  ... code here
  6.  
  7.  return something; 
  8. }
  9.  
  10. EventCache = anonymousfunction();
  11.  
so in the end EventCache is holding RESULT of running anonymousfunction.
Nov 23 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.