Question

所以我是javascript的新手（事实上，一般来说是编程新手）。

我的问题是，我可以考虑在

中加载.js文件

<head><script src="script.js"></script>...</head>

加载头文件（如c / c ++）？

我猜不是。假设我的script.js看起来像这样：

function copyToClipboard(text) 
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}

我的index.html看起来像这样：

<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>

它不起作用，即它不等待我的点击（这意味着该功能被正确加载 - 它被成功调用，只是弹出窗口不等待鼠标事件）。但如果我把脚本放在行中，它就可以了：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
  window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>

Answer 1

第一个代码不起作用的原因是您正在调用copyToClipboard()函数并将返回值分配给onclick变量。在第二个代码中，您正确地为其分配了一个函数引用，而不是立即调用该函数。

换句话说：

onclick = copyToClipboard(document.getElementById("a").value);

“致电copyToClipboard()，将返回值（undefined）分配给onclick变量”

onclick = function copyToClipboard(text) { ...

“将名为copyToClipboard()的函数的引用分配给onclick变量”

要使它在外部脚本中使用函数定义，请将函数调用包装在匿名函数中：

onclick = function() {
    copyToClipboard(document.getElementById("a").value);
};

Answer 2

所有人都赞扬javascript的力量误导开发人员错误地诊断他们的问题！

这不是您定义内联onclick处理程序的方式。内联的onclick处理程序是一个html元素的属性（或属性，我们稍后会发现）：

<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>

你对<script>标签所做的只是包含一些javascript代码，在浏览器解析你的html时执行：

<script> onclick=copyToClipboard(document.getElementById("a").value);</script>调用您的函数，并将其返回值分配给onclick。

但是等一下，为什么你的第二个片段有效？

这是因为onclick也是dom元素的属性。你也可以为window本身分配一个点击处理程序 - 这是你的第二个片段实际上正在做的事情（感谢javascript的uncool功能试图分配给一个未定义的变量分配给全局对象的属性）。这意味着无论您点击 where ，都会调用您的新点击处理程序。

关于你的开场问题，你不能说标签就像包含一样 - 与包含的文件不同，脚本不仅仅涉及声明和定义。您可以查看一些模块标准/框架，例如RequireJS，以获得更多类似的功能。

正在加载.js文件

2 个答案: