Лучший способ вызова функции 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, как в ответе Конрада Рудольфа.