如何在腳本標簽中觸發事件監聽器<head>

Question

我有以下幾行代碼，如果將代碼塊放入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>

我猜是因為在<head>沒有觸發addeventlistener ，如何解決？ 謝謝。

Answer 1

在獲得要綁定的元素之前，您不能綁定事件處理程序，在它們存在之前，您不能這樣做。

將獲取元素並綁定事件處理程序的代碼放入函數中
從元素存在后觸發的事件中調用該函數

例如：

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);
}

如何在腳本標簽中觸發事件監聽器<head>

問題描述

1 個解決方案

解決方案1
1 已采納 2014-04-27 20:57:50

如何在腳本標簽中觸發事件監聽器<head>

問題描述

1 個解決方案

解決方案1 1 已采納 2014-04-27 20:57:50

解決方案1
1 已采納 2014-04-27 20:57:50