什麼是最好的方式,爲什麼?將JS事件綁定到鏈接的最佳方法是什麼?
Href?
<a href="javascript:helloworld()">link</a>
onclick?
<a href="#" onClick="helloworld()">link</a>
框架綁定(例如jquery)?
<a id="foo" href="#">link</a>
…
$('#foo').live('click',helloworld);
什麼是最好的方式,爲什麼?將JS事件綁定到鏈接的最佳方法是什麼?
Href?
<a href="javascript:helloworld()">link</a>
onclick?
<a href="#" onClick="helloworld()">link</a>
框架綁定(例如jquery)?
<a id="foo" href="#">link</a>
…
$('#foo').live('click',helloworld);
這取決於。通常,你應該從來沒有有一個什麼都不做的鏈接。如果您的用戶禁用了JavaScript,或者無法加載,該怎麼辦?你必須優雅地降低有一個可訪問的網站。因此,舉例來說,如果你有一個使用Ajax加載一個框,你應該有它鏈接到其他網頁,然後綁定在不顯眼的處理程序,單獨的JavaScript:
<a class="loadPage" href="actualPage.php">Go to my page</a>
和另一個文件:
$('.loadPage').click(function(e) {
// Load with Ajax...
e.preventDefault(); // Stop the link from going through
});
如果用JavaScript生成的鏈接,那麼它沒關係使用#
作爲href
的大部分時間。但是,在這種情況下,您仍然應該使用JavaScript附加處理程序,而不是在innerHTML
(* shudder *)中設置onclick
。因此,一般來說:如果您的產品代碼中有onclick
屬性或javascript:
鏈接,那麼在您的HTML中,您不會分隔內容,行爲和演示文稿。你無法訪問;而你不是語義的。不要這樣做!
以上都不是。
您應該將JS保存在一個外部文件中(關注點分離使代碼更易於管理和重用),並且使用庫可以平滑支持標準事件綁定的瀏覽器和舊版Internet Explorer之間的差異。
但是,JavaScript應該是unobtrusive。你不應該從頁面頂部的鏈接開始。
請勿使用'javascript:myaction()'。
總是喜歡使用框架,因爲它創建了一個真正的綁定(意味着通過瀏覽器窗口註冊事件)。 所以最好的方法是: $('#foo')。live('click',function(){my action ....});
它也可以讓你保持你的JavaScript在一個單獨的文件,這是處理腳本的最佳做法。
第二好的方法是使用onClick事件。
請勿在HTML標記中使用javaScript!
$(function() {
var foo = $('#foo');
if(foo[0]) {
foo.click(function(event) {
//..
event.preventDefault();
});
}
});
或使用on()
因爲jQuery 1.7+
foo.on('click', function(event) {
//..
event.preventDefault();
});
也不要使用live()
從來沒有(截至jQuery 1.7
,該.live()
方法已過時)!
我認爲一個相關的問題就是爲什麼,如果您不希望點擊觸發頁面重新加載,就像''標籤通常那樣,您根本就使用''標籤。 – Pointy 2012-01-08 18:26:13
當然是最後一個,因爲它將內容與行爲分開。 – 2012-01-08 18:26:38
@Pointy因爲錨可以通過TAB訪問,而SPAN則不可以。另一方面,按鈕具有表現性問題(它們不像CSS那樣容易)。 – 2012-01-08 18:28:12