Javascript 中的 HTML5 拖放事件

Question

我在 HTML 和 Javascript 中遵循了有关拖放的小教程，在这里找到：

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

问题是，我正在处理内部风格限制。 这意味着所有文件都必须按照这里每个人都使用的标准编写。

对于 Javascript，其中之一是始终以对象表示法编写函数。

IE

var myFunction = function() {}

代替

function myFunction() {}

在本教程中，HTML5 拖放事件是通过addEventHandler() function 添加的。 这需要您使用普通表示法，因为如果您使用对象表示法，addEventHandler() function 会由于某种原因而绊倒它。

我尝试在没有 addEventHandler 的情况下将所有内容重写为这样：

myElement.dragstart = function(e) {}

但没有一个奏效。 然而，使用带有 addEventHandler 的普通表示法，一切都像一个魅力。 我只是想确定：我是否忽略了某些东西，或者这应该起作用吗？ 我的一部分怀疑这还没有得到适当的支持，你需要使用 addEventHandler。 是这样吗？

Answer 1

设置dragstart属性与使用addEventHandler('dragstart', ...)不仅仅是符号问题。 您可以而且应该坚持使用addEventHandler 。 但是，使用这种“样式”应该没有问题：

var myFunction = function() {}

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

---

编辑

好的，所以这并不能直接回答这个问题，但我觉得它确实需要在这种情况下解决。

写作

var myFunction = function() {}

代替

function myFunction() {}

不是任何类型的“对象表示法”。 第一个是function 表达式，因为它是AssignmentExpression的一部分。 第二个是function 声明。 有什么不同？ kangax解释得很好：

首先，在任何其他表达式之前解析和评估 function 声明。 即使声明在源中位于最后，它也将首先评估 scope 中包含的任何其他表达式。
...
function 声明的另一个重要特征是有条件地声明它们是非标准化的，并且在不同的环境中有所不同。 您永远不应依赖有条件声明的函数，而应改用 function 表达式。

内部制定 JavaScript 代码标准的人真的了解其中的细微差别吗？

Answer 2

第一点：这是一个愚蠢的规则。 有两种命名 function 的方法是有充分理由的，而忽略这一点来指定一种风格是相当模糊的，IMO。

我认为您的问题是，您的 function 在您到达addEventHandler时尚未定义。 这是因为所谓的“提升”。 在此过程中，以function myFunction() {}语法命名的函数被“提升”到 function 的顶部。 因此，如果您在 function 中的任何位置调用它们，则 function 将起作用。 例如，这将起作用：

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

但是，以您的组织风格命名的功能不会被提升。 变量声明是，但在到达那行代码之前不会设置值。 所以这不起作用：

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

解决此问题的最简单方法是将所有 function 定义移动到 scope 的顶部，除非有充分的理由稍后定义它们。 所以这将起作用：

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