Javascript assigning event handlers via for loop

Question

Apologies if I appear a little "noobish" with events, but for whatever reason the following doesn't work for me:

var someDomRef = document.getElementByRef("refVal");
for(i=0;i<someDomRef.length;i++) { //or someDomRef.childNodes.length/someDomRef.TagRef.length
 someDomRef.onmouseup = function() {
  someDomRef.childNodes[i].onmouseover=function() {
   if(someRef.onmouseup) {
    //return false for the onmouseover handler of this(someDomRef.childNodes[i])
   }
  };
 };
}

Each time I release the mouse button after holding it upon someDomRef, I find a "onmouseover could not be assigned to undefined object" error in the JS console. Any help would be greatly appreciated for solving this problem (note: I know that I can assign another event handler outside of the onmouseover function to itself on the condition of someDomRef.onmouseup, but I'd like to know of a way to achieve this from within that onmouseover itself (I've also tried assigning var x = someDomRef.childNodes[i] and passing it through as an argument to the conditional clause for someRef.onmouseup, but this doesn't work either (albeit it doesn't return an error for this attempt)).

what is someValue where does it come from. Also i don't get your point what are you trying to do attach event handlers? — Deeptechtons
– Deeptechtons, Commented Jun 6, 2011 at 5:07
Apologies, check my edit for the amendment for what I was referring to with someVal. I was trying to change the handler for an object's event from within another handler for the same event of that object executed on the condition of an external event transpiring. — user784446
– user784446, Commented Jun 6, 2011 at 5:16

Jim Deville · Accepted Answer · 2011-06-06 05:08:48Z

1

i is undefined when mouseup is called. You need to close over this with some closure functions:

var someDomRef = document.getElementByRef("refVal");
for(i=0;i<someval;i++) {
    (function(i) {
        someDomRef.onmouseup = function() {
            someDomRef.childNodes[i].onmouseover=function() {
                if(someRef.onmouseup) {
                    //return false for the onmouseover handler of this(someDomRef.childNodes[i])
                }
            };
        };
    })(i);
}

You may need another closure inside of the onmouseup function

answered Jun 6, 2011 at 5:08

Jim Deville

10.7k1 gold badge42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sarnold Over a year ago

@James, note there's no need to discuss edits in the body of the post -- SO keeps an edit history for edited posts, so it's always easy to find what's original, what was added or removed, along with the checkin notes why. :)

user784446 Over a year ago

Thanks. The syntax you're using for creating that function is unfamiliar to myself, and I'm somewhat absent of the necessities for searching of how and why pertaining to it (i.e. the (function(){})(); ) -- could you explain it a little? Thanks!

Deeptechtons Over a year ago

@user784446 it's called self invoking function. It is the definition of the function and it runs immediately after definition. So for each value in the SomeValue the function runs taking i as the paramerter. the rest is self explanatory i suppose

Jim Deville Over a year ago

@user784446 it's used to create a "closure" that keeps the local variables (i in this case) around after they normally would have gone out of scope.

Jim Deville Over a year ago

@sarnold - i actually added the body edit explanation to ensure my edit was long enough

|

Collectives™ on Stack Overflow

Javascript assigning event handlers via for loop

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related