Html5 canvas HTML5画布事件处理程序是否工作？_Html5 Canvas

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

html5-canvas

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