链接列表：使用事件监听器使我的HTML结构尽可能简单

Question

I've been doing the following for as long as I can remember:

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

Since it's just a list of links, nothing else, I know I can do this to simplify the structure:

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

I've just lightened the HTML structure by 50%. If I have 100 rows, I'd have 100 elements instead of 200.

Of course, I should use event listeners instead on inline onclick , but I don't know how... How do I use event listeners (instead of inline onclick ) to create a list of links? See here for the motivation for this.

Answer 1

If you do not mind using jQuery, you could have a look at basic jQuery tutorials of binding click handlers to elements. This way, you can set an onclick to all <li> at once:

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