Question

这是javascript。我似乎无法弄清楚为什么addEventListener不想工作。我尝试鼠标悬停，但它没有发出警报。这看起来很简单，但我无法弄清楚......：

<script type="text/javascript">
var CANVAS;
var CONTEXT;
function init() {
        CANVAS = document.getElementById('canvas');
        CONTEXT = CANVAS.getContext('2d');
        CANVAS.addEventListener('mouseover', poop, false);
    }

    function poop(e) {
        alert('This is an alert.');
    }

</script>

这是HTML：

<body>
<div id="main">
<canvas id="canvas" width = "256" height = "256"></canvas>
</div>
</body>

Answer 1

showdev说...你应该在某处调用init（）函数来激活该代码并为你添加事件监听器：

<body onLoad="init()">

或者您也可以在声明函数后在javascript中调用它，只要您确保在页面加载后调用它。

Answer 2

它可以工作，只在文档的正文或末尾启动init函数 http://jsfiddle.net/alemarch/wapcs71s/

var CANVAS;
var CONTEXT;
function init() {
        CANVAS = document.getElementById('canvas');
        CONTEXT = CANVAS.getContext('2d');
        CANVAS.addEventListener('mouseover', poop, false);
    }

    function poop(e) {
        alert('This is an alert.');
    }
init()

Answer 3

您没有结束init()函数并且从未调用过它。在您的JavaScript中，您可以添加

window.onload = init(); <!--> Add this line anywhere outside of other functions but delete this comment <-->

或在<body>中可以添加

<body onload='init()'>

希望这会有所帮助！

为什么我的addEventListener不起作用？

3 个答案: