addEventListener 如何为 HTML 5 Canvas 上的 keydown 工作？

addEventListener() 方法是 JavaScript 中的一个内置函数，它接受要侦听的事件。每当描述的事件被触发时要调用的第二个参数意味着只要按下一个键就会触发keydown事件。本文解释了画布上的keydown事件侦听器的工作。

需要聚焦画布以捕捉关键事件。无法将keydown事件分配给画布，因为无法使用光标聚焦画布。因此，解决此问题的方法是将画布聚焦。

下面的示例说明了 addEventListner 用于画布上的 keydown 的工作方法：

例子：

 

  

    
        Working of addeventlistener
        for keydown on a canvas
    
      
     
        body {
            display: block;
            margin-top: 8%;
        }
        h1 { 
            color:green;
            text-align:center; 
        }
          
        /* Canvas decoration */
        canvas {
            display: block;
            margin: 0 auto;
            background: green;
            border: 2px solid black;
            height: 300px; 
            width: 300px;
        }
    

  

    GeeksforGeeks
    
      
    
        var lastDownTarget, canvas;
        window.onload = function() {
            canvas = document.getElementById('canvas');
              
            /* For mouse event */
            document.addEventListener('mousedown',
                            function(event) 
            {
                lastDownTarget = event.target;
                alert('Mousedown Event');
            }, false);
              
            /* For keyboard event */
            document.addEventListener('keydown',
                            function(event) 
            {
                if(lastDownTarget == canvas) {
                    alert('Keydown event! Key pressed: '
                                      + event.key);
                }
            }, false);
        }
    

  

输出：首先，使用mousedown事件使画布聚焦。在画布聚焦后，将触发keydown事件。