我想了解在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方法吗?
答案 0 :(得分:0)
您可以在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()" >
答案 1 :(得分:0)
您也可以通过这种方式调用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();
}();