canvas.addEventListener()
对 canvas 元素的事件监听用addEventListener()实现,
但是有一点缺陷是:canvas 不支持键盘事件,为了解决这个问题,可以采用以下两种方案:
方案一: key event ---- use window as object
通过window对象实现对canvas事件的监听和处理
window.addEventListener('keydown', doKeyDown, true);
注:扩大的事件触发的执行对象,可以通过取 canvas 元素的第一级父元素取代 window 对象
方案二:key event ----- use DOM element as object
通过在 canvas 元素上添加其它支持键盘事件的DOM元素属性,实现键盘事件支持,如使用 H5 的标签属性 tabindex
<canvas id='canvas' width='300' height='300' tabindex='-1'></canvas>
canvas.addEventListener('keydown', doKeyDown, true);
注:几乎所有浏览器均支持tabindex,除了 Safari,此为方案二的不足之处