鏈接列表：使用事件監聽器使我的HTML結構盡可能簡單

Question

只要我記得，我一直在做以下事情：

<ul>
  <li><a href="somewhere">Some text</a></li>
</ul>

因為它只是一個鏈接列表，沒有別的，我知道我可以這樣做來簡化結構：

<ul>
  <li onclick="window.location.href='somewhere'">Some text</li>
</ul>

我剛剛將HTML結構減輕了50％。 如果我有100行，我將有100個元素而不是200個。

當然，我應該onclick聯onclick上使用事件監聽器，但我不知道如何...如何使用事件監聽器（而不是內聯onclick ）來創建鏈接列表？ 看到這里的動機。

Answer 1

如果你不介意使用jQuery，你可以看看將點擊處理程序綁定到元素的基本jQuery教程。 這樣，您可以立即為所有 <li>設置onclick ：

http://jsfiddle.net/7zba5/1/

HTML：

<ul>
    <li data-url="http://www.google.com">Google</li>
    <li data-url="http://www.stackoverflow.com">Stack Overflow</li>
    <li data-url="http://www.superuser.com">Super User</li>
</ul>

JavaScript的：

$('li').click(function() {
    window.location.href = $(this).data('url');
});