Javascript 如何在<；中的脚本标记中触发事件侦听器；头>；

我有以下几行代码，如果我把代码块放在body标记中，它会工作，但是当我试图把它放在头中时，它就不工作了

<script type="application/javascript" language="JavaScript">

        function writeMessage(canvas, message) {
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.font = '18pt Calibri';
            context.fillStyle = 'black';
            context.fillText(message, 10, 25);
        }

        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top};
        }


        var canvas = document.getElementById("canvas_prime");
        var context = canvas.getContext("2d");

        canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
        }, false);

</script>

函数writeMessage（画布、消息）{
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
context.font='18pt Calibri'；
context.fillStyle='black'；
上下文。填充文本（消息，10，25）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top}；
}
var canvas=document.getElementById（“canvas_prime”）；
var context=canvas.getContext（“2d”）；
canvas.addEventListener（'mousemove'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
var message='鼠标位置：'+mousePos.x+'，'+mousePos.y；
writeMessage（画布、消息）；
}，假）；

---

我猜是因为

addeventlistener

在

中时未触发，如何修复它？谢谢。

在获得要绑定到的元素之前，您无法绑定事件处理程序，而在它们存在之前，您无法绑定事件处理程序

将获取元素并绑定事件处理程序的代码放入函数中

从元素存在后激发的事件调用该函数

例如：

addEventListener('load', bindEventHandlers);

function bindEventHandlers() {

    var canvas = document.getElementById("canvas_prime");
    var context = canvas.getContext("2d");

    canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
    }, false);
}