另一种方式

Question

我想了解在html中调用javascript函数的不同方法。我有以下代码：

HTML：

<body>
    <div id="container">
        <canvas height="600" width="600" id="myCanvas">
        </canvas>
    </div>
    <script type="text/javascript" src="js/code.js"></script>
</body>

JS：

//constructs the ball and the snake before the game starts
function init() {
    var theCanvas = document.getElementById("myCanvas");
    var context = theCanvas.getContext("2d");
    context.fillStyle = "#FFA23F";
    context.fillRect(10,10,10,10);
}

window.addEventListener('load',init(),false);

1）在JS代码中，我必须通过事件监听器对init（）方法进行编码，我理解它是调用js方法（通过事件）的方法之一。为什么我不能在没有事件监听器的情况下调用init（）方法？我可以通过调用init（）在html中调用它吗？像这样：

<body>
    <div id="container">
        <canvas height="600" width="600" id="myCanvas">
              <script>
                     init();
              </script>
        </canvas>
    </div>
    <script type="text/javascript" src="js/code.js"></script>
</body>

2）为什么当我删除函数标题时我只能通过脚本标记和src到js文件自动执行javascript代码？ JS中的这样的东西：

    var theCanvas = document.getElementById("myCanvas");
    var context = theCanvas.getContext("2d");
    context.fillStyle = "#FFA23F";
    context.fillRect(10,10,10,10);

3）在html中调用js方法有哪些其他方法？什么是最佳做法？还有其他方法可以在html中调用javascript方法吗？

Answer 1

您可以在HTML加载后调用您的函数，最好是在页脚中如下。

//put this function anywhere, either in header or footer
function init() {
    var theCanvas = document.getElementById("myCanvas");
    var context = theCanvas.getContext("2d");
    context.fillStyle = "#FFA23F";
    context.fillRect(10,10,10,10);
}

将此代码放在页脚中，因此当它运行时，它将查找您在DOM中指定的元素

init()

另一种方式

您可以在onload事件中的body标记中调用它，如下所示

<body onload="init()" >

Answer 2

您也可以通过这种方式调用init方法。

HTML

<head>
  <script type="text/javascript" src="js/code.js"></script>
</head>
<body>
  <div id="container">
    <canvas height="600" width="600" id="myCanvas">
    </canvas>
  </div>
</body>

code.js

var _MYJS = _MYJS || {};

_MYJS.canvas = function() {
   var _this = this;

   this.drawCanvas = function(){
       var theCanvas = document.getElementById("myCanvas");
       var context = theCanvas.getContext("2d");
       context.fillStyle = "#FFA23F";
       context.fillRect(10,10,10,10);
   }

   /* Init call */
   this.init = function() {
      _this.drawCanvas();
   }

   return this.init();

}();

JSFIDDLE

如何在html中调用javascript函数？

2 个答案:

另一种方式