Javascript protocol and events
What does the following code mean -
<a href="javacsript:;" onClick="addItem(160)">some link</a>
My basic doubt is which script is run when we click on the link
The onclick will run first. If onclick doesn't return false (in this case it doesn't), then href will be processed.
The javascript part in the href attribute is the protocol (you know, like http, ftp or mailto). What it does is it tells the browser that the URL is actually JavaScript code.
Normally, when you click on a link, the browser will execute whatever it finds in the href attribute. However, the browser will also trigger the onclick event before it handles the href thing. So, setting an onclick handler will override the normal behavior.
Thus, the event handler becomes king and it has the possibility to allow or prevent the default browser behavior by returning true (allow) or false (prevent).
So, in your example, when you click on that link, the browser will trigger addItem. If it returns false, nothing happens. If it returns true, the browser will execute the code in the href attribute. But since it finds no statement in there (i.e. empty statement), nothing happens.
Try the following code:
<a href="http://google.com/" onclick="return false;">won't go to google.com</a>
<a href="http://google.com/" onclick="return true;">will go to google.com</a>Does that make sense to you?
Note that when the browser interprets the "javascript:" value of an "href", if the return value is not empty then it is interpreted as the document content desired for the <a> tag! Here is a test page for you to enjoy:
http://gutfullofbeer.net/jslink.html
The source for that page (look at it; it's really short) includes the following link:
<a href='javascript:getLink()'>Click to go there!</a>
The function "getLink()" is defined as follows:
function getLink() {
var sel = document.getElementById('sel');
return sel.options[sel.selectedIndex].value;
}
As you see, the function grabs the current selected value of the <select> element on the page and returns that. What does the <select> element look like?
<select id='sel'>
<option value='<html><head><meta http-equiv="refresh" content="2;http://cnn.com"/></head><body>Redirecting to CNN ...</body></html>'>CNN</option>
<option value='<html><head><meta http-equiv="refresh" content="2;http://zombo.com"/><head><body>Redirecting to Zombocom ...</body></html>'>Zombocom</option>
<option value='<html><head><meta http-equiv="refresh" content="2;http://reddit.com"/></head><body>Redirecting to Reddit ...</body></html>'>Reddit</option>
</select>
The values of those options are complete HTML markup for a page with a redirect to the requested site. Because the URL returns a value, that value is understood by the browser to be the new page content.
It's pretty mind-blowing. I'm not sure why you'd ever do this.
your doubt is true !, you must find "function addItem(x)" in a javascript file that linked by script tag from the page.(usually in head tag)
The "javascript:" inside href is a way to tell the browser to execute javascript instead of going to a different page.
This line, for example will show a message box with "testing" message.
<a href="javascript:alert('testing');">Click me</a>
and this one will execute an empty javascript statement that will do nothing
<a href="javacsript:;">Click me</a>
The onclick is an event that also fires when a link is clicked. In contrast to href it does not allow you to put in a link to a different page; it accepts only javascript.
Browsers will first fire onclick event and then process href attribute. If it's an URL (empty href means current URL; click will just refresh the page) it will follow it, if it's javascript it will execute it.
Putting "javascript:;" or "javascript:void(null);" inside href is old and wrong technique to ensure browser does not not refresh the page after onclick is processed.
To answer your question; both scripts will execute, but the href script will do nothing.
加载中,请稍侯......
精彩评论