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

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

3 голосов
/ 13 июня 2011

В своем ответе на следующий вопрос SO: Что означает привязка событий? , я сделал мимолетное замечание, что использование inline-JavaScript / Early-Binding для привязки событий JavaScript было «часто ошибочным»

Например: 

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

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

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

Ответы [ 3 ]

2 голосов
/ 14 июня 2011

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

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

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

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

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

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

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

2 голосов
/ 14 июня 2011

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

onclick="foo()"

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

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

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

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

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

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

Вы можете написать: 

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

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

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

...