HTML5 события перетаскивания в Javascript

Question

Я следовал небольшому руководству по перетаскиванию в HTML с Javascript, найденному здесь:

http://www.html5rocks.com/tutorials/dnd/basics/

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

Для Javascript, один из них - всегда писать функции в нотации объекта.

1010 * Т.е. *

var myFunction = function() {}

вместо

function myFunction() {}

В этом руководстве события для перетаскивания в HTML5 добавляются с помощью функции addEventHandler(). Это требует, чтобы вы использовали обычную нотацию, потому что если вы используете объектную нотацию, функция addEventHandler () по какой-то причине отключается.

Я пытался переписать все так, без addEventHandler:

myElement.dragstart = function(e) {}

Но это не сработало. Однако при использовании нотации normal с addEventHandler все работает как шарм. Я просто хочу убедиться: я что-то пропускаю или это должно сработать? Часть меня подозревает, что это просто пока не поддерживается должным образом, и вам нужно использовать addEventHandler. Это тот случай?

Answer 1

Пункт № 1: это глупое правило.Есть два способа назвать функцию по уважительной причине, и игнорирование того, что указание одного стиля довольно слабое, ИМО.

Ваша проблема, я думаю, в том, что ваша функция не была определена к тому времениВы получите addEventHandler.Это из-за того, что называется «подъем».В этом процессе функции, названные с синтаксисом function myFunction() {}, «поднимаются» наверх функции.Так что если вы вызываете их где-нибудь в функции, функция будет работать.Например, это будет работать:

el.addEventListener('click', foo);
function foo() {}

Функции, названные в стиле вашей организации, однако, не поднимаются.Объявление переменной есть, но значение не устанавливается, пока не будет достигнута эта строка кода.Так что это не сработает:

el.addEventListener('click', foo);
var foo = function() {};

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

var foo = function() {};
el.addEventListener('click', foo);

Answer 2

Установка свойства dragstart против использования addEventHandler('dragstart', ...) - это не просто вопрос записи.Вы можете и должны придерживаться addEventHandler.Однако не должно быть никаких проблем с использованием этого «стиля»:

var myFunction = function() {}

myElement.addEventListener('dragstart', myFunction, ...);

---

Edit

Хорошо, так что это не дает прямого ответа на вопрос, но я чувствую, что это такнеобходимо рассматривать в этом контексте.

Запись

var myFunction = function() {}

вместо

function myFunction() {}

- это , а не любого рода "нотация объекта"."Первое - это выражение функции , так как оно является частью AssignmentExpression.Вторым является объявление функции .Какая разница? kangax объясняет это очень хорошо :

Прежде всего, объявления функций анализируются и оцениваются перед любыми другими выражениями.Даже если объявление расположено последним в источнике, оно будет оцениваться , прежде всего любые другие выражения , содержащиеся в области видимости.
...
Еще одна важная особенность объявлений функций заключается в том, что их условное объявление являетсяне стандартизирован и варьируется в зависимости от среды.Вы никогда не должны полагаться на условное объявление функций и использовать вместо них выражения функций.

Действительно ли люди, которые устанавливают собственные стандарты кода JavaScript, понимают тонкие различия?