Javascript 中的 HTML5 拖放事件答案

【问题标题】：HTML5 drag & drop events in JavascriptJavascript 中的 HTML5 拖放事件
【发布时间】：2011-09-04 02:12:48
【问题描述】：

我遵循了一个关于使用 Javascript 在 HTML 中拖放的小教程，在这里可以找到：

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

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

即

var myFunction = function() {}

而不是

function myFunction() {}

在本教程中，HTML5 拖放事件是通过addEventHandler() 函数添加的。这需要你使用 normal 表示法，因为如果你使用 object-notation，addEventHandler() 函数会因为某种原因跳过它。

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

myElement.dragstart = function(e) {}

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

【问题讨论】：

【解决方案1】：

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

var myFunction = function() {}

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

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

写作

var myFunction = function() {}

而不是

function myFunction() {}

不是任何形式的“对象符号”。第一个是函数表达式，因为它是AssignmentExpression 的一部分。第二个是函数声明。有什么不同？ kangax explains it really well:

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

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

【讨论】：

也许不应该……但有。我最初是这样做的，因为除了切换 2 个单词和添加一个 = 符号之外，我发现没有什么区别。但它不会那样工作。
查看我的编辑。也许您正在尝试有条件地声明该函数？如果您可以提供更多上下文来说明使用函数声明有效但函数表达式无效的确切条件，这可能会有所帮助。
这“在源中的最后一个，它将评估首先评估范围内包含的任何其他表达式。”根本不是真的。
@c-smile 你有证据支持吗？一个 jsFiddle，至少？举证责任在你身上。
实际的证据是什么？无论如何......脚本执行有两个阶段。编译（到字节码或类似的东西）和执行（字节码）。函数声明正在编译并在编译阶段分配给名称。这发生在在 FormalParameterList 名称被输入之后但在VariableDeclaration 被输入到命名空间之前。那是根据 ECMA 规范。

【解决方案2】：

第 1 点：这是一条愚蠢的规则。有两种命名函数的方法是有充分理由的，而忽略它来指定一种样式是相当模糊的，IMO。

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

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

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

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

解决这个问题的最简单方法是将所有函数定义移到作用域的顶部，除非有充分的理由稍后再定义它们。所以这会起作用：

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

【讨论】：