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

Question

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

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

ИЛИ

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

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

EDIT: Ищу кросс-браузер & межплатформенное решение, которое должно работать на андроидов & IPADS тоже.

Answer 1

Ничто не является хорошим.

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

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

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

Преимуществом этого является то, что

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

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

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

Answer 2

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

1. Вы можете использовать this внутри onclick для ссылки на сам якорь (делать то же самое в варианте 1 даст вам window вместо).

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

3. Я видел, как странные вещи случаются при использовании href="javascript:someFunction()", и функция возвращает значение; вся страница будет заменена только этим значением.

код Ловушки

Инлайн:

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

2. Сложнее повторное использование; требуется деликатная копировальная вставка, чтобы переместить ее из одного проекта в другой.

3. Добавляет вес к вашим страницам, тогда как внешние файлы кода могут быть кэшированы браузером.

Answer 3

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

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

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

Посмотрите на this answer.

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

Answer 4

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

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

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