Теги Javascript и Якоря, лучшая практика?

Быстрый вопрос.

Должны ли мы помещать Javascript в HREF или использовать onClick (event)?

Есть ли какие-либо плюсы и минусы для использования одного из них. Лично я считаю, что проще/чище просто поместить код в href, и не нужно возвращать false или беспокоиться о переходе на #

Существуют ли какие-либо известные проблемы, связанные с браузером, с каждым методом...

Примеры:

<a href="javascript: alert('foo!');">Click Me</a>
<a href="#" onClick="alert('foo!');return false">Click Me</a>
<a href="javascript:void(0)" onclick="alert('foo!');">Click Me</a>

Ответы

Ответ 1

1) Скорее используйте onclick. Убедитесь, что в href есть рациональный резервный URL, если JS не разрешено.

2) Вместо onclick="..." вы должны использовать обработчик событий.  Найдите элементы с помощью jQuery или XPath, а затем для каждого вызовите element.addEventListener().

element.addEventListener("click", function() { alert("bar"); }, false);

Или старый способ...

element.onclick = function() { alert("foo"); };

Ответ 2

Сохранение кода отдельно от html является более чистым IMO.

<a id="foo" href="#">Click Me</a>

Затем в главном или отдельном файле js:

document.getElementByID("foo").onclick = function() { alert("hi"); }

Ответ 3

Я бы лично не поместил код JavaScript в HTML. Вы должны использовать прослушиватель событий, который будет срабатывать при нажатии кнопки <a>.

<a href="#" id="linkA">Click Me</a>

И затем:

document.getElementById('linkA').addEventListener('click', function(e){
    e.preventDefault(); // Prevents page from scrolling to the top
    alert('foo!');
});

Ответ 5

Как правило, я бы использовал внешний вид JavaScript, но с помощью href вызывается:

<a href="javascript:foo('bar!');">Click Me</a>

Хотя я считаю, что ваш быстрый alert пример прекрасен как исключение из правила.

Однако, если вы используете JS-библиотеку, такую ​​как jQuery, вы можете, конечно, напрямую назначать события - см. первый пример в учебнике jQuery, в котором рассматривается элемент привязки http://docs.jquery.com/Tutorials: How_jQuery_Works