Question

这是我的代码：

<html>
  <head>
    <style>
      *{ margin: 0px; padding: 0px; }
      canvas{ display: block; margin: 0px auto; border: 1px solid #000;}
    </style>
  </head>
  <body>
    <canvas id = "game"> 
    </canvas>
    <script>
      var y = new Image();
      y.onload = alerting();
      function alerting() {
        alert("yeaaa");
      }
      var canvas = document.getElementById("game");
      var ctx = canvas.getContext("2d");
      //y.src = "Untitled.bmp";
      ctx.drawImage(y, 5, 5);
    </script>
  </body>
</html>

两个问题：

为什么.onload在声明图像源之前运行？我认为它应该在声明.src之后运行。
为什么我可以将onload重命名为任何内容并且仍会运行？

`

Answer 1

为什么.onload在声明图像源之前运行？我认为它应该在声明.src之后运行。

因为括号到位后你立即调用alerting函数，而不是像这样分配它：

y.onload = alerting;

为什么我可以将onload重命名为任何东西，它仍会运行？

同样的原因：alerting()不是函数 - 它是调用它的结果。因此，无论它分配给y哪个属性，表达式仍然会被计算。

底线：函数是JavaScript中的一等公民 - 它们是值，它们是对象等。所以对待它们就这样，你应该没事。）

Answer 2

它的运行是因为你告诉它：

y.onload = alerting();
                   ^-- call the function immediately

v.s。

y.onload = alerting;
                   ^--- assign the function object itself, not its results.

Answer 3

在alerting之后添加括号时，您正在调用该函数，然后执行赋值。您应该通过引用分配函数，而不是将函数的返回值分配给onload。

Answer 4

首先运行，因为你在这里调用它

y.onload = alerting();

onload事件处理程序需要一个回调函数，它应该只是句柄

y.onload = alerting;

此外，由于警告返回undefined（它没有返回值），原始版本的onload处理程序中没有任何反应。这基本上就是这样：

alerting();
y.onload = undefined;

为什么在声明src之前运行onload函数？

4 个答案: