•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,593 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,520 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 9452 | Replies: 13 | Solved
 |
•
•
Join Date: Apr 2007
Location: Birmingham
Posts: 378
Reputation: 
Rep Power: 2
Solved Threads: 38
Posting Whiz
Hello all.
Which is the best practice to use when creating dynamic links i.e. onclick events.
OR
i realise the first is not an 'event' but i have a web app which is displaying 6000 of these links all at one time and am unsure which is taking up more of my processor by dynamically creating onclick events or adding the javascript function in the href ?
also could anyone tell me if there are compatibility problems with either method. thanks for your help
Which is the best practice to use when creating dynamic links i.e. onclick events.
<a href="javascript:somefunction()">click me</a>
<a href="javascript:void(0)" onclick="somefunction()">click me</a>
i realise the first is not an 'event' but i have a web app which is displaying 6000 of these links all at one time and am unsure which is taking up more of my processor by dynamically creating onclick events or adding the javascript function in the href ?
also could anyone tell me if there are compatibility problems with either method. thanks for your help
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation: 
Rep Power: 25
Solved Threads: 368
Like you said, since 'href' isn't an event handler I wouldn't have much faith in the first approach and I have never seen it being used in a professional environment.
The same issue occurs with the second approach since you end up calling a function inside the 'href'. A better way would be to use :
> unsure which is taking up more of my processor by dynamically creating onclick events
Profiling your application is the way to go here.
The same issue occurs with the second approach since you end up calling a function inside the 'href'. A better way would be to use :
<a href="#" onclick="myFunction();">Take me away</a>
> unsure which is taking up more of my processor by dynamically creating onclick events
Profiling your application is the way to go here.
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
•
•
Join Date: Apr 2007
Location: Birmingham
Posts: 378
Reputation:
Rep Power: 2
Solved Threads: 38
Posting Whiz
•
•
•
•
Originally Posted by ~s.o.s~ 
The same issue occurs with the second approach since you end up calling a function inside the 'href'. A better way would be to use :
<a href="#" onclick="myFunction();">Take me away</a>
i have been using this practice for years but have come across a problem. using '#' will refresh the view of the page (thus if having scrolled miles down a page, resulting in a lovely jerk back to the top)
in the web app i am writing this just cannot happen.
i have 2 frames and
the left frame contains a tree, i fell flat on my face using built in asp.net trees so had to manually create one using dynamic javascript. the tree works perfectly and is at least 10 times faster than the .net version but i cannot use '#' for the very reason above.
is there any other way of stopping the anchor tag posting back ?
i do not wish to add 2 (onmouseover & onmouseout) events just to make it appear like a link.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Feb 2005
Location: Braintree, UK
Posts: 1,166
Reputation:
Rep Power: 7
Solved Threads: 59
How about ditching anchor tag all-together?
Use css behaviours instead.
<span style="cursor: hand; display: block;" onclick="alert('You clicked me');">Click Me</span>•
•
•
•
i do not wish to add 2 (onmouseover & onmouseout) events just to make it appear like a link.
Use css behaviours instead.
Last edited by hollystyles : Sep 11th, 2007 at 11:46 am.
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 971
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
•
•
•
•
Originally Posted by Fungus1487
i have been using this practice for years but have come across a problem. using '#' will refresh the view of the page (thus if having scrolled miles down a page, resulting in a lovely jerk back to the top)
Try:
<a href="#" onclick="some_function( );return false;" /> I haven't tested it, but, it's advocated here: http://blog.reindel.com/2006/08/11/a...void-the-void/, and it makes sense in theory.•
•
•
•
Originally Posted by hollystyles
How about ditching anchor tag all-together?
...
Use css behaviours instead.
This is ideal in theory, but older browsers ( i.e. IE6 ) don't support the :hover psuedoclass for any element except <a>, and the :visited psuedoclass _certainly_ won't work in this context in any browser. However, new browsers seem to be supporting :hover on any element, which is a good thing.
Plato forgot the nullahedron..
•
•
Join Date: Feb 2005
Location: Braintree, UK
Posts: 1,166
Reputation:
Rep Power: 7
Solved Threads: 59
I just tries return false and it worked for me. It did occurr to me to return false from the javascript function but that smelled liked bad programming practice. Placing it directly in the anchor element feels better.
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 971
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
•
•
•
•
Originally Posted by hollystyles
Placing it directly in the anchor element feels better.
If you mean directly in the href attribute of an anchor element; href isn't an event handler.. so that smells worse to me.
I guess the event chain for a user click on an <a> element is something like: ( ignoring mousedown, mouseup, mouseover, and mouseout events )
if( onclick( ) ){ if (href ){ [navigate to href] } } Last edited by MattEvans : Sep 11th, 2007 at 12:46 pm.
Plato forgot the nullahedron..
•
•
Join Date: Feb 2005
Location: Braintree, UK
Posts: 1,166
Reputation:
Rep Power: 7
Solved Threads: 59
•
•
•
•
If you mean directly in the href attribute of an anchor element; href isn't an event handler.. so that smells worse to me.
No I was agreeing with where you had placed it. I had forgotton you can have multiple statements in an onclick attribute seperated by semi-colons.
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 971
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
Ah yep, I get it. Hm.. thinking about it though.. Fungus1487; you could save a bit of transmission bandwidth with 6000 links involved, if you onclick="return some_function()" and make sure some_function always returns false.
In uncompressed 8bit ASCII; the dif between:
is 6 characters per link, meaning you'll potentially save {about} 36KB on 6000 links of the same type.. =P
Smells understandable in this circumstance.
In uncompressed 8bit ASCII; the dif between:
return some_function() some_function();return false
Smells understandable in this circumstance.
Last edited by MattEvans : Sep 11th, 2007 at 1:47 pm.
Plato forgot the nullahedron..
•
•
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation:
Rep Power: 25
Solved Threads: 368
Or better yet to put a piece of code in 'onload' which loops through all the links or links based on a given class and just attach a function to the 'onclick' event handler if what he needs is a common or almost common behavior for those links...
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Help with Swapping Images onclick (JavaScript / DHTML / AJAX)
- Can't change CSS style for "onClick" text link (JavaScript / DHTML / AJAX)
- onclick parent goto previous page (HTML and CSS)
- onClick Events to Change to dynamic text (HTML and CSS)
- How can i get href="mailto.. to work in a function. (HTML and CSS)
- Onclick questions (HTML and CSS)
- Seeking help on js popup repositioning behaviour (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: how to validate credit card and debit card no in client side using javascipt language
- Next Thread: Http request error when using AJAX.
