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

Event listener doesn't wait for click

Tarantulus
100+
P: 114
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
  1. display=document.getElementById("display");
  2. field=display.getElementsByTagName('div'); 
  3.  
  4. for (var i in field){         
  5.    if (field[i].addEventListener)
  6. field[i].addEventListener('click',go(),false);
  7. else if (field[i].attachEvent)
  8. {           
  9. field[i].attachEvent('onclick',go());         
  10. }
right now as soon as the page loads it triggers go() (which is a page redirect function)
Oct 16 '08 #1
Share this Question
Share on Google+
7 Replies


100+
P: 428
You are telling it to do so-
replace go() with go

The parens call the function immediately
Oct 16 '08 #2

Tarantulus
100+
P: 114
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...
Oct 17 '08 #3

P: 55
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
  1. function bindMethod(func,args){
  2.     var tmp=args
  3.     return func(tmp)
  4. }
  5.  
  6. addEventListener('click',bindMethod(go,myArguments),false)
  7.  
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....
Oct 17 '08 #4

Tarantulus
100+
P: 114
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
  1. function bindMethod(func,args){
  2.     var tmp=args
  3.     return func(tmp)
  4. }
  5.  
  6. addEventListener('click',bindMethod(go,myArguments),false)
  7.  
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.
Oct 17 '08 #5

P: 55
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?
Oct 17 '08 #6

Tarantulus
100+
P: 114
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.
Oct 17 '08 #7

P: 55
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
  1. var myUrl='http://someplace.else'
  2. myDiv.onmouseup=function(){ go(myUrl) }
  3.  
  4. go=function(url,hash){
  5.     window.location.href=url
  6.     window.location.hash=hash || ''
  7. }
for the current window or just:

Expand|Select|Wrap|Line Numbers
  1. go=function(url){
  2.     window.open(url)
  3. }
the following link has some really good info on the location property:

DevGuru : Location
Oct 17 '08 #8

Post your reply

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