Better way to call javascript function in a tag

Question

Which of the following ways is a better way to call a js function from an a tag    lt a href  javascript someFunction    gt LINK lt  a gt    OR   lt a href     onclick  someFunction     return false   gt LINK lt  a gt    I have seen this question here  but it says  lt span onclick  someFunction    gt  is a better option  But due to some reasons I have to use  lt a gt  links   EDIT  I am looking for a cross browser  amp  cross platform solution which should work on androids  amp  iPads too

User · Answer

Some advantages to the second option    You can use this inside onclick to reference the anchor itself  doing the same in option 1 will give you window instead   You can set the href to a non-JS compatible URL to support older browsers  or those that have JS disabled   browsers that support JavaScript will execute the function instead  to stay on the page you have to use onclick  return someFunction     and return false from inside the function or onclick  return someFunction    return false   to prevent default action   I ve seen weird stuff happen when using href  javascript someFunction    and the function returns a value  the whole page would get replaced by just that value    Pitfalls  Inline code    Runs in document scope as opposed to code defined inside  lt script gt  tags which runs in window scope  therefore  symbols may be resolved based on an element s name or id attribute  causing the unintended effect of attempting to treat an element as a function  Is harder to reuse  delicate copy-paste is required to move it from one project to another  Adds weight to your pages  whereas external code files can be cached by the browser

User · Answer

I   m tempted to say that both are bad practices   The use of onclick or javascript  should be dismissed in favor of listening to events from outside scripts  allowing for a better separation between markup and logic and thus leading to less repeated code   Note also that external scripts get cached by the browser   Have a look at this answer   Some good ways of implementing cross-browser event listeners here

User · Answer

Neither is good   Behaviour should be configured independent of the actual markup  For instance  in jQuery you might do something like      the-element   click function         perform action here          in a separate  lt script gt  block   The advantage of this is that it   Separates markup and behaviour in the same way that CSS separates markup and style Centralises configuration  this is somewhat a corollary of 1   Is trivially extensible to include more than one argument using jQuery   s powerful selector syntax   Furthermore  it degrades gracefully  but so would using the onclick event  since you can provide the link tags with a href in case the user doesn   t have JavaScript enabled   Of course  these arguments still count if you   re not using jQuery or another JavaScript library  but why do that

User · Answer

Modern browsers support a Content Security Policy or CSP  This is the highest level of web security and strongly recommended if you can apply it because it completely blocks all XSS attacks   Both of your suggestions break with CSP enabled because they allow inline Javascript  which could be injected by a hacker  to execute in your page   The best practice is to subscribe to the event in Javascript  as in Konrad Rudolph s answer

[javascript] Better way to call javascript function in a tag

Examples related to javascript

Examples related to html