链接列表：使用事件侦听器使 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）来创建链接列表？请参阅此处了解这样做的动机。

Answer 1

如果您不介意使用 jQuery，您可以查看将单击处理程序绑定到元素的基本 jQuery 教程。这样，您可以一次将 onclick 设置为 all

：

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');
});