Html5 canvas HTML5画布事件处理程序是否工作?

Html5 canvas HTML5画布事件处理程序是否工作?,html5-canvas,Html5 Canvas,在W3中,它写道“不支持事件处理程序”。但当我将onclick附加到画布上时,它的工作原理是什么?为什么 <html> <body> <canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;" onclick="alert(1)"> </canvas> <script> 因为学校的内容应该谨慎对待。它们是正确的,为一些事情提供

在W3中,它写道“不支持事件处理程序”。但当我将onclick附加到画布上时,它的工作原理是什么?为什么

<html>
<body>
 <canvas id="myCanvas" width="100" height="100" style="border:1px solid    #c3c3c3;" onclick="alert(1)">
</canvas>
<script>

因为学校的内容应该谨慎对待。它们是正确的,为一些事情提供了很好的例子,但在其他事情上是直接错误的——并且没有一个正确的机制来告诉/纠正它们

Canvas既支持订阅事件(使用
addEventListener()
),也支持直接回调事件(例如
Canvas.onclick=…

对于按键,您需要使用
tabIndex
来“激活”捕捉焦点的功能。虽然它有焦点,但它也可以接收关键事件(在任何情况下,您都可以从
窗口
对象接收这些事件)

var canvas=document.getElementById(“canvas”);
var out=document.getElementById(“out”);
canvas.addEventListener(“键控”,输出);
canvas.addEventListener(“键控”,输出);
canvas.addEventListener(“mousedown”,鼠标);
canvas.addEventListener(“mouseup”,鼠标);
addEventListener(“mousemove”,鼠标);
// ... 等
函数输出(e){out.innerHTML=e.type+“:“+e.keyCode}
功能鼠标(e){out.innerHTML=e.type+”:x=“+e.clientX+”y=“+e.clientY}
canvas{background:#ddd}

html画布元素不支持鼠标事件。它(默认情况下)不支持其他事件,如keydown等。。。