Лучший способ вызова функции javascript в теге

Какой из следующих способов является лучшим способом вызова функции js из тега?

<a href="javascript:someFunction()">LINK</a>

ИЛИ

<a href="#" onclick="someFunction();" return false;">LINK</a>

Я видел этот вопрос здесь, но он говорит, что <span onclick="someFunction()"> - лучший вариант. Но по некоторым причинам я должен использовать ссылки <a>.

EDIT: Я ищу кросс-браузер и кросс-платформенное решение, которое также должно работать на андроидах и iPad.

Ответ 1

Ничего хорошего.

Поведение должно быть настроено независимо от фактической разметки. Например, в jQuery вы можете сделать что-то вроде

$('#the-element').click(function () { /* perform action here */ });

в отдельном блоке <script>.

Преимущество этого заключается в том, что он

Отделяет разметку и поведение так же, как CSS разделяет разметку и стиль
Конфигурация централизует (это несколько следствие 1).
Тривиально расширяемо, чтобы включить более одного аргумента, используя синтаксис синтаксиса jQuerys

Кроме того, он изящно деградирует (но так будет использовать событие onclick), так как вы можете предоставить теги ссылок с помощью href, если у пользователя нет встроенного JavaScript.

Конечно, эти аргументы по-прежнему считаются, если вы не используете jQuery или другую библиотеку JavaScript (но зачем это?).

Ответ 2

Некоторые преимущества второго варианта:

Вы можете использовать this внутри onclick для ссылки на сам якорь (выполнение этого же в опции 1 даст вам window).
Вы можете установить href на не совместимый с JS URL-адрес для поддержки старых браузеров (или отключенных JS); браузеры, которые поддерживают JavaScript, будут выполнять эту функцию вместо этого (чтобы остаться на странице, которую вы должны использовать onclick="return someFunction();" и return false внутри функции или onclick="return someFunction(); return false;", чтобы предотвратить действие по умолчанию).
Я видел странные вещи при использовании href="javascript:someFunction()", и функция возвращает значение; вся страница будет заменена только этим значением.

Ловушки

Встроенный код:

Выполняется в области document в отличие от кода, определенного внутри тегов <script>, который работает в области window; поэтому символы могут быть разрешены на основе атрибута name или id элемента, что приводит к непреднамеренному эффекту попытки обработать элемент как функцию.
Сложнее повторное использование; требуется деликатная копировальная вставка, чтобы переместить ее из одного проекта в другой.
Добавляет вес к вашим страницам, тогда как внешние файлы кода могут кэшироваться браузером.

Ответ 3

Im соблазн сказать, что оба являются плохой практикой.

Использование onclick или javascript: должно быть отклонено в пользу прослушивания событий из внешних скриптов, что позволяет лучше разграничить разметку и логику и тем самым привести к менее повторяемому коду.

Обратите внимание также, что внешние скрипты получают кеширование браузером.

Посмотрите этот ответ.

Некоторые хорошие способы применения кросс-браузерных прослушивателей событий здесь.

Ответ 4

Современные браузеры поддерживают Политика безопасности контента или CSP. Это самый высокий уровень безопасности в Интернете и настоятельно рекомендуется, если вы можете применить его, потому что он полностью блокирует все атаки XSS.

Оба ваших предложения ломаются с CSP, потому что они позволяют встроить Javascript (который может быть взломан хакером) для выполнения на вашей странице.

Лучшей практикой является подписка на событие в Javascript, как в ответе Конрада Рудольфа.