window.myFunction = myFunction vs. onclick= "mySecondFunction()"

Question

假设我有一个看起来像这样的HTML页面

...
<h1>Title</h1>
<button id="myFirstButton">my first button</button>
<button id="mySecondButton" onclick="myClickFunction()">my second button</button>
<script src="myJavascript.js"></script>
...

而myJavascript.js看起来像这样

。

...
window.myClickFunction = myClickFunction;
document.getElementById("myFirstButton").addEventListener("click", () => {
console.log("clicked on first button!");
});
function myClickFunction() {
console.log("clicked on second button!");
}
...

此代码工作正常。但我有几个问题。

1. 有什么区别？
2. 在哪些情况下我应该使用哪种方法？
3. 为什么当我不使用window.myClickFunction = myClickFunction时myClickFunction()不起作用？

Answer 1

当你在全局范围内声明一个函数 myFunction 时，它是 window.myFunction 所以

window.myClickFunction = myClickFunction;与做myfunction=myFunction一样，没有任何效果。

要回答#3，我们需要查看更多代码。也许您没有在全局范围内声明myClickFunction，而是在事件处理程序或其他东西中声明

例如

window.addEventListener("load",function() {
function myFunction() { console.log("hello"); }
})
function myFunction1() { 
console.log("hello from myFunction1"); 
myFunction(); // not in window scope
}
myFunction1()