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?

Expand|Select|Wrap|Line Numbers

 
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

Quote:

Originally Posted by mrhoo

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)

Expand|Select|Wrap|Line Numbers

 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

Quote:

Originally Posted by 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)

Expand|Select|Wrap|Line Numbers

 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

Quote:

Originally Posted by 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?

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:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 go=function(url){

    window.open(url)

}

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

DevGuru : Location

Event listener doesn't wait for click

re: Event listener doesn't wait for click

re: Event listener doesn't wait for click

re: Event listener doesn't wait for click

re: Event listener doesn't wait for click

re: Event listener doesn't wait for click

re: Event listener doesn't wait for click

re: Event listener doesn't wait for click

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about