链接列表：使用事件监听器使我的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');
});