how to trigger event listeners in script tag in <head>

Question

I have the following lines of code, if I put the block of code into body tag it works, but when I tried to put it into the header, it does not work.

<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>

I'm guessing its because the addeventlistener is not triggered when it's in the <head> , how to fix it? thanks.

Answer 1

You can't bind the event handlers until you can get the elements you want to bind to, and you can't do that until they exist.

Put the code that gets the elements and binds the event handlers in a function
Call that function from an event that fires after the elements exist

For example:

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

how to trigger event listeners in script tag in <head>

Question

1 answers

solution1
1 ACCPTED 2014-04-27 20:57:50

how to trigger event listeners in script tag in <head>

Question

1 answers

solution1 1 ACCPTED 2014-04-27 20:57:50

solution1
1 ACCPTED 2014-04-27 20:57:50