为什么我的 addEventListener 不起作用？答案

【问题标题】：Why isn't my addEventListener working?为什么我的 addEventListener 不起作用？
【发布时间】：2014-12-09 20:42:03
【问题描述】：

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

【问题讨论】：

你在任何地方都给init()打电话吗？

标签： javascript html canvas

【解决方案1】：

showdev 所说的...您应该在某处调用 init() 函数以触发该代码并为您添加事件侦听器：

<body onLoad="init()">

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

【讨论】：

【解决方案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()

【讨论】：

【解决方案3】：

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

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

或在<body> 中添加

<body onload='init()'>

希望这会有所帮助！

【讨论】：

它可能在四年前有所帮助，回到最初被询问、回答和接受的时候。