Почему встроенный обработчик атрибутов является плохой идеей в современном семантическом HTML?

Являются ли встроенные обработчики событий плохой практикой?

Например: <button onclick=someFunction()>Click me!</button>

Если да, каковы недостатки использования встроенных обработчиков событий?

Источник

2 ответа

Решение

Это плохая идея, потому что...

1) В течение долгого времени существенный акцент делался на четкое разделение между содержанием, стилем и сценарием. Смешивание вашего HTML с JS не согласуется с этим.

2) Что еще более важно, вы получаете гораздо меньше контроля над своими событиями. В частности:

  • вы можете связать только одно событие каждого вида с событиями DOM-zero (что и есть встроенные события), поэтому вы не можете иметь два click обработчики событий

  • если событие указано встроенным, JS указывается в виде строки (значения атрибута всегда являются строками) и оценивается при возникновении события. Оценка это зло.

  • Вы столкнулись с необходимостью ссылаться на именованные функции. Это не всегда идеально (обработчики событий обычно принимают анонимные функции) и влияет на функцию, которая должна быть глобальной

Короче говоря, обрабатывать события централизованно через выделенный addEventListener API, или через JQuery или что-то.

Источник

Помимо семантики и других мнений, выраженных в принятом ответе, все встроенные сценарии считаются уязвимостью и высокой угрозой безопасности. Предполагается, что любой веб-сайт, ожидающий запуска в современных браузерах, будет устанавливать свойство "Content-Security-Policy" (CSP) либо через метаатрибут, либо через заголовки.

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

Источник

Основываясь на ответе @Mitya.

В большинстве современных JS-библиотек React, Vue и т. Д. встроенные обработчики событий считаются идиоматическими, но большая часть ограничений, упомянутых @Mitya, исчезла. В качестве примера мы рассмотрим Vuejs и сравним его с пунктом, указанным выше:

  1. У вас может быть более одного обработчика событий, смотрите здесь
  2. Значения событий (обработчики), такие как onclickне являются простой строкой, а выражения js смотрите здесь
  3. Проблема Global Scope просто не существует (потому что ваш код будет переведен в миниатюру, переупакован с помощью таких инструментов, как webpack или другие).

На мой взгляд, встроенный обработчик событий значительно улучшает читаемость, но мнения могут отличаться.

Источник
Другие вопросы по тегам