Есть ли какие-либо случаи, когда вам приходится использовать атрибут ранней привязки / встроенного события в HTML / JavaScript

Question

В моем ответе на следующий вопрос SO: Что означает привязка к событию?, я мимоходом заметил, что использование встроенного JavaScript / раннего связывания для привязки событий JavaScript "часто было ошибочным"

Например:

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

Я выступал за подход "поздней привязки", при котором в разметке нет ссылок на JavaScript, что, как я понимаю, является общепринятой передовой практикой.Однако комментаторы утверждали, что были случаи, которые требовали его использования, и я задался вопросом, что бы это могло быть.

Не вступая в обсуждение относительных достоинств того или другого, может ли кто-нибудь вспомнить какие-либо обстоятельства, которые диктуют вам использовать (например) onclick атрибут вместо подхода с поздней привязкой.

Большое спасибо

Answer 1

Я думаю, что многие разработчики сделают это либо по незнанию, либо из-за недостатка знаний (что, конечно, распространено), а остальные разработчики сделают это потому, что просто удобнее использовать атрибуты HTML-JS, чем позднюю привязку, если вы знаете, что определенные объекты и функции всегда загружаются на каждую страницу и они просто "будут там".

Я думаю, что это особенно верно, когда указанный HTML поступает из обратного вызова AJAX.Возьмем пример, когда AJAX-запрос возвращается с HTML-ответом, и этот HTML-код вставляется на страницу.Теперь наивный разработчик стал бы думать в этом направлении:

• Я понятия не имею, какие элементы находятся внутри этого HTML-ответа, поэтому я не знаю, какие поздние привязки мне нужно добавить.
• Возможно, мне нужно добавить их все на всякий случай!Или написать какой-нибудь скрипт синтаксического анализа, который обнаруживает элементы и привязывается к тем, которые я нахожу?
• Но что, если мне нужно привязаться к чему-то, чего еще не существует?Пора написать какой-нибудь длинный встроенный JavaScript!

Все это может быть устранено с помощью своего рода вездесущей привязки, которая применяется ко всем текущим и будущие элементы на странице.В jQuery эквивалентом является live().Вместо того, чтобы писать:

$('.foo').click(function(){...});

Вы могли бы написать:

$('.foo').live('click', function(){...});

Теперь все элементы с именем класса 'foo' будут выполнять функцию при нажатии, включая элементы, которые в настоящее время не существуют.Очень полезно для динамических AJAX-интерфейсов.

Возможно, вы это уже знаете, но я просто указываю, что все, что могут делать атрибуты JS, чистый JS может сделать лучше, и я бы счел это лучшей практикой.

Answer 2

<цитата>

Комментаторы утверждали, что были случаи, когда требовалось его использование

Полагаю, я один из тех комментаторов. На самом деле я сказал, что встроенные слушатели « являются разумным вариантом при определенных обстоятельствах ». Я не думаю, что есть случаи, когда это "необходимо" (что я понимаю в данном контексте как обязательное).

Добавление встроенных слушателей просто применяет ту же логику на сервере для добавления слушателей, которая будет применяться на клиенте, и имеет следующие преимущества:

1. Разметку можно создавать и кэшировать или использовать в качестве статических страниц, слушатели не добавляются каждым клиентом снова и снова при загрузке страниц.
2. Проблемы, связанные с задержкой между доступностью элемента и добавлением слушателя с помощью DOMReady, функций загрузки или «нижних скриптов», полностью устранены.
3. Капризы различных "кроссбраузерных" функций DOMReady с откатом при загрузке удалены - у таких функций нет возможности не добавлять слушателей, если они не используются.

Конечно, это не означает, что все слушатели должны быть добавлены встроенными и что динамическое добавление слушателей - мусор. Я просто указываю, что это жизнеспособный метод, который решает определенные проблемы и является вполне разумным решением во многих случаях. чехлы.

Если вы считаете, что «раннее связывание» слушателей - это хорошо, сделайте это как можно раньше - поместите их в строку. :-)

PS. Я также думаю, что сказал, что мне не нравится использование «привязки» в этом контексте, поскольку слушатели не привязаны к элементам в каком-либо реальном смысле. Это просто функции, которые вызываются, когда элемент получает связанное событие. Единственный тип привязки заключается в том, что ключевое слово this слушателя может быть установлено для ссылки на связанный элемент (который согласован во всех браузерах для встроенных слушателей, но не обязательно для тех, которые добавляются позже).

Answer 3

Причины, по которым атрибуты onclick плохие:

onclick="foo()"

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