Список ссылок: Использование прослушивателей событий для упрощения структуры 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 для всех <li> однажды:

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

HTML:

<ul>
    <li data-url="http://www.google.com">Google</li>
    <li data-url="http://www.stackru.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');
});