Event listener doesn't wait for click

[Tarantulus]

Hi Guys,

I'm trying to set an eventlistener for a bunch of DIV tags. can you tell me why this code wont work?

display=document.getElementById("display");
field=display.getElementsByTagName('div'); 
 
for (var i in field){         
   if (field[i].addEventListener)
{ 
field[i].addEventListener('click',go(),false);
} 
else if (field[i].attachEvent)
{           
field[i].attachEvent('onclick',go());         
}

right now as soon as the page loads it triggers go() (which is a page redirect function)

[mrhoo]

You are telling it to do so-
replace go() with go

The parens call the function immediately

[Tarantulus]

You are telling it to do so-
replace go() with go

The parens call the function immediately

Thanks, but now I'm in a worse situation than I started. the script just locks now. it won't do anything.

EDIT: realised that when the code was run, the element it's looking for doesn't exist, moved it, now the page loads, but still no event...

[zaphod42]

what does your 'go' function look like? I try not to use event listeners... they are a very useful function of javascript, but with a little bit of work, you can duplicate the functionality of an event listener without the cross browser problems:)

another thought is to use a "bind closure" function (I prefer to call it bind method, but bind closure is the industry standard name)

function bindMethod(func,args){
    var tmp=args
    return func(tmp)
}
 
addEventListener('click',bindMethod(go,myArguments),false)
 

this will bind the arguments that you need sent to the function to your event regardless of scope.

also....if this is an form field, why don't you use the focus event? a click event is the combination of a mousedown and mouseup event....

[Tarantulus]

what does your 'go' function look like? I try not to use event listeners... they are a very useful function of javascript, but with a little bit of work, you can duplicate the functionality of an event listener without the cross browser problems:)

another thought is to use a "bind closure" function (I prefer to call it bind method, but bind closure is the industry standard name)

function bindMethod(func,args){
    var tmp=args
    return func(tmp)
}
 
addEventListener('click',bindMethod(go,myArguments),false)
 

this will bind the arguments that you need sent to the function to your event regardless of scope.

also....if this is an form field, why don't you use the focus event? a click event is the combination of a mousedown and mouseup event....

Go is literally just a "window.location" call, I'm trying to creating dynamic hyperlinks from the content of an ajax call. these are not form fields, they're textual elements.

[zaphod42]

so you need to call a function that opens a window or changes the url of the current window based on the content of a text element on the page?

do you have any script you could post?

[Tarantulus]

so you need to call a function that opens a window or changes the url of the current window based on the content of a text element on the page?

do you have any script you could post?

yep pretty much hit the nail on the head. to clarify:

$object chosen from list
ajax pulls back $data from PHP using id of $object
$data comes as <div id=key>alphanumeric<key><div id=value>$numeric </value>
here is the bit I can't do, create an event listener so that div "value" is a link to http://url.com/index.php?$numeric

then an AJAX SQL call is made to select name where id =$numeric.

hope that makes more sense.

here is the actual code:

[HTML]
<div id="display">
<div class="key" id="key-resource" ></div>
<div class="value" id="label-resource">9520</div>
</div>
[/HTML]

and the javascript is as in the 1st post.

[zaphod42]

okay, I don't know where your "go" function is coming from, or what arguments you could be sending it based on how you seem to be setting this up....but window.location is only part of that. you need to use location.href, there is also a location.hash property. To make the div into link however, you might be better off not setting an event listener.....the way I understand them event listeners will stack, e.g. if you keep adding them and the page doesn't reload, which call to "go" do you want to fire? better to just set the mouseup of the div in the javascript directly:

var myUrl='http://someplace.else'
myDiv.onmouseup=function(){ go(myUrl) }
 
go=function(url,hash){
    window.location.href=url
    window.location.hash=hash || ''
}

for the current window or just:

go=function(url){
    window.open(url)
}

the following link has some really good info on the location property:

DevGuru : Location