標籤中 href 和 onclick 的區別，以及href="javascript:xxx(this);"與onclick="xxx(this);" 傳遞this參數的區別

<a>標籤中href屬性動做和onclick事件的區別，以及href="javascript:xxx(this);"與onclick="xxx(this);" 傳遞this參數的區別

 

1、href 與 onclick 的區別

我之前在寫<a>標籤的 href 和 onclick 一直很隨意，後來出過幾回問題，之後纔開始重視這個問題：
首先摘錄一篇文檔：
在Javascript中void是一個操做符，該操做符指定要計算一個表達式，可是不返回值。
void 操做符用法格式以下：
javascript:void(expression) 
javascript:void expression
expression 是一個要計算的 Javascript 標準的表達式。表達式外側的圓括號是可選的，可是寫上去是一個好習慣。 (實現版本 Navigator 3.0)

你可使用 void 操做符指定超連接。表達式會被計算，可是不會把當前文檔處裝入任何內容。

下面的代碼建立了一個超連接，當用戶點擊之後不會發生任何事。當用點擊戶連接時，void(0) 計算爲 0，但 Javascript 上沒有任何效果。
<a href="javascript:void(0);">單擊此處什麼也不會發生</a>
下面的代碼建立了一個超級連接，用戶單擊時會提交表單。
<a href="javascript:void(document.form.submit());">單此處提交表單</a>

下面代碼則執行了subgo() 函數，
<a href="javascript:void(0);" onclick="subgo();">點我</a>
在這裏，javascript:void(0)，沒起實質上的做用，它僅僅是一個死連接，執行的函數是subgo()。

<a href="#" onclick="subgo();">點我</a>
與
<a href="javascript:void(0);" onclick="subgo();">點我</a>
的區別。

實際上 # 包含了一個位置信息，默認的錨是#top ，也就是網頁的上端 ，而 javascript:void(0); 僅僅表示一個死連接，沒有任何信息。因此調用腳本的時候最好用void(0)。

href通常是指向一個URL地址，也能夠調用javascript ，如 href="javascript:xxx();",文檔中推薦這樣寫：
<a href="javascript:void(0);" onclick="xxx();">yyy</a>
儘可能不要用javascript:協議作爲a的href屬性，由於這種方法在複雜環境，有時會產生奇怪的問題，有時會致使沒必要要的觸發window.onbeforeunload事件，在IE裏面更會使gif動畫圖片中止播放。

若是連接中同時有，href 屬性函數和 onclick 事件函數，那到底執行那個呢？
<a href="javascript:subgo2();" onclick="subgo();">點我</a>
subgo()與subgo2()執行順序是怎樣的？

連接的 onclick 事件被先執行，其次是 href 屬性下的動做（頁面跳轉，或 javascript 僞連接）； 

假設連接中同時存在 href 與 onclick，若是想讓 href 屬性下的動做不執行，onclick 必須獲得一個 false 的返回值，通常是這樣寫onclick="xxx();return false;" 。
<a href="javascript:subgo2();" onclick="subgo(); return false;">點我</a>
上面的連接只執行onclick事件函數，href 裏的 subgo2()不執行。

若是頁面過長有滾動條，且但願經過連接的 onclick 事件執行操做。應將它的 href 屬性設爲 javascript:void(0);，而不要是 #，這能夠防止沒必要要的頁面跳動； 
若是在連接的 href 屬性中調用一個有返回值的函數，當前頁面的內容將被此函數的返回值代替； 
2、<a>標籤裏的函數事件寫法的實戰建議

若是在實際應用中確實是要用到<a>標籤來響應onclick事件的，
那麼就建議使用下面三種方法 
<a href="javascript:void(0);" onclick="doSomething();">test</a> 
<a href="http://xxx/findname/" onclick="doSomething();return false">test</a> 
<a href="http://xxx/findname/" onclick="doSomething();event.returnValue=false">test</a> 
方法後面的分號";"，可加可不加，通常推薦加上。

3、<a>標籤語法結構

超級連接<a>標籤表明一個連接點，是英文anchor（錨點）的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像，這已經是衆所周知了，但關於它的語法結構可能有點不爲人知，而要用活它則必須瞭解其語法結構。<a>標籤的基本語法結構是： 
<a 
class=type 
id＝value 
href＝reference 
name＝value 
rel=same|next|parent|previous 
rev＝value 
target＝window 
style＝value 
title=title 
onclick＝function 
onmouseout＝function 
onMouseOver=function>鏈接</a> 
從標籤的語法結構能夠看出，在設定一個超級連接時有不少參數可供選擇，以實現不一樣的連接效果，這有點出乎意料吧？！ 

其中class和id選項：用於設定連接點所屬的類型和分配的ID號，一般不加以設定。
最經常使用的兩個參數是href和name。其中href是hypertext reference的縮略詞，用於設定連接地址。連接地址必須爲url地址，若是沒有給出具體路徑，則默認路徑和當前頁的路徑相同。 連接到的文件也分爲幾種狀況：若是爲HTML文件，則在當前瀏覽器中直接打開；若是爲可執行文件（.exe文件），則直接執行或下載，咱們提供下載的文件就是用它的這種特性作的；若是爲文本文件如word格式的文件，則在瀏覽器中打開此文件，並能夠進行編輯加工。 
rel：表示設定連接的關係：rel=same表示待連接的文件與此文件相同，rel=next表示待連接的文件爲下一頁，rel＝parent 表示本文件爲待連接文件的父文件，rel=previous則表示待連接的文件爲上一頁。 
rev：則用於設定反向連接。 
target：是在採用幀窗口的狀況下設定連接到哪個窗口，還有target="_blank"是表示新開一窗口打開網頁。 
title：用於設定連接點被選到時顯示的標題。 
onclick：對應於一個事件，當連接點被點擊後將觸發這個事件，執行對應的子程序。 
onmouseover：與onclick相似，對應的事件在鼠標移到連接點上時被觸發。 
onmouseout：對應的事件在鼠標移出鎮接點後被觸發。 

舉幾個例子：
<a href="http://xxx/blog/index.htm">回到主頁</a> 
<a href="http://xxx/blog/sound.wav">播放語音文件</a> 
<a href="http://xxx/blog/javascipt.open()">執行對應的程序</a> 
<a herf="document.doc">打開對應的文檔進行加工</a> 
應用技巧 
一、提供下載文件 
有很多網友來信問，提供下載的效果怎麼作。實際上仍然是作一個超級連接，不過供下載的文件必須上傳到網站上。例：有一個「網頁技巧」的文件包供下載，文件名是「homepagejq.zip」且已上傳到網站了，則這個連接的代碼能夠這樣寫：<a href="http://xxx/blog/homepagejq.zip">點擊這裏下載「網頁技巧」文件包</a>。 

二、在新窗口中打開連接的網頁 
設定「target」的值爲「_blank」。例：新開窗口打開網頁「aboutme.htm」。產生該效果的代碼是：<a href="http://xxx/blog/aboutme.htm" target="_blank">關於我......</a>。 

三、鼠標移到連接，顯示一行說明文字 
設定「title」參數值，便可得到這種效果。例：當鼠標移到「黃山村夫」這個連接上時，顯示說明「這是一個介紹網頁製做技巧的專業網站」。這個連接的代碼是這樣的：<a href="http://xxx/blog/hscf.htm" title="這是一個介紹網頁製做技巧的專業網站">黃山村夫</a>。 

四、鼠標移到一個連接上彈出一個窗口 
這是設定onmouseover參數得到的效果。例：當鼠標移到一個連接上，彈出一個窗口並在窗口中顯示「鼠標懸停效果演示！」。這個連接的代碼是這樣的：<a href="http://xxx/blog/其它網頁.htm" onmouseover="alert('鼠標懸停效果演示！')">連接</a>。用相似的方法能夠製做當鼠標按下後彈出提出示窗口、當鼠標離開時彈出提示窗口的效果。 

五、連接到本頁的指定內容 (能夠用於tab頁的跳轉）
要實現連接到本頁的某一部份內容上（也就是「文件內跳轉」），必須用參數name指定連接點的名稱。選定一塊文本，能夠用name參數爲其命名，以備 連接所用。所謂同一個文件內的跳轉是指當讀者在閱讀一個很長的文件的時候，若只對某部分的內容感興趣，能夠採用跳躍式的閱讀方式。其基本格式是： 
<a href＝"＃連接點名稱">第二部分</a>第一部份內容...... 
<a name＝"連接點名稱"></a>第二部分實際內容...... 
這樣當你點擊「第二部分」這個超級連接後，就會自動轉移到「第二部分實際內容」這個地方來。「name」參數所定義的連接點名稱能夠隨意取，但連接的「href」參數中的連接點名稱必須與其一致，不要忘記在前面加上「#」。 

六、連接到其它頁面的指定內容位置 
方法與上例相似，但在「href」參數中的連接點名稱前要加上網頁的文件名。例：有兩個網頁page1.htm和page2.htm ，每頁均有兩部份內容，現要在page1.htm中製做一個超級連接，按下該連接後將轉到page2.htm的第二部份內容上。那麼咱們能夠這樣作，首先在page2.htm第二部份內容開始的地方寫上這樣一句代碼：
<a name="連接點名稱"></a>
在page1.htm中寫上這樣一個連接代碼：
<a href="http://xxx/blog/page2.htm#連接點名稱">page2 的第二部份內容</a>

七、連接到E_mail 
點擊一個超級連接後，將啓動客戶機上的電子郵件管理軟件給你寫信。例這行代碼：<a href="mailto:web@163.com">請給我寫信</a>。一旦你點擊了「請給我寫信」這個連接，將自動啓動電子郵件管理軟件（如OE）的寫信功能，並已把郵件地址加在了收信人的地址欄裏了。 
連接不只能夠以文本做載體，也能夠以圖象做載體，並且能夠以圖片的某一部分做載體，且都能實現上述這些效果，方法也相同，所不一樣只是載體，也就是連接的兩對方括號中間的那部分，因此再也不另舉例了。

例子：
用CheckBox控件時，想實如今每一個checkbox後再加連接的功能，點連接實現一些功能以外，還要把checkbox選中。
<input type="checkbox" name="chk" id="chkid">
<label for="chkid">選中它
    <a href="javascript:void(0);" onclick="this.parentNode.click();">[label中的連接]</a>
</label>
最後用parentNode來實現的。

4、 href="javascript:xxx(this);"和onclick="xxx(this);"的區別

正確的作法：在onclick的方法中傳遞this參數，將當前a標籤對象傳遞給方法。即便用onclick="xxx(this);"方法。

想傳遞當前對象給一個函數，因而就將這個URL寫成"javascript:shoControlSidebar(this);"，但是結果發現
這並不可行，傳遞過去的參數是一個對象，可是卻得不到任何其餘信息。我想獲得的是innerText，而這個this並不是
指向它所在的a標籤。 

這是<a href="javascript:shoControlSidebar(this);">
和<a href="javascript:void(0);" onclick="shoControlSidebar(this);">
不一樣的地方。 

當使用 onclick="shoControlSidebar(this);" 的時候，解釋器會給他包裝一個匿名函數，變成了： 
代碼以下:
a.onclick = function anonymous() { 
    shoControlSidebar(this); 
} 

這個this指的就是a這個對象，而使用href的方式時，因爲是一個地址，這個this就無處可指了。 
代碼以下：
<a href="javascript:void(0);" onclick="test(this);">A標籤測試</a> 

想獲取A 中的innerHTML 若是href="test(this);" 不但獲取不到值，並且程序將退出，href引向不對。 正確獲取當前標籤對象代碼以下：JS實戰代碼：//js的方法中參數不能再寫成test(this)了，由於this有特定的含義，因此寫成test(obj)才正確function test(obj){    //obj就是onclick="test(this)"中this傳過來的，this指的就是頁面中點擊的a標籤對象，    //而後經過HTML的DOM屬性parentNode獲取a標籤的父節點，不斷往上獲取到最外層tr的父節點，而後進行下一步的其餘事件操做了。    var node = obj.parentNode.parentNode.parentNode.parentNode;    $(node).find("tr[class='parents']").find("input[type='checkbox']").prop("checked",'true');    node.parentNode.removeChild(node);    alert(obj);     //js     alert(obj.innerHTML);     //jquery     alert($(obj).html()); }