El método addEventListener() es una función incorporada en JavaScript que toma el evento para escuchar. El segundo argumento que se llamará cada vez que se active el evento descrito significa que el evento keydown se activa cada vez que se presiona una tecla. Este artículo explica el funcionamiento de un detector de eventos keydown en un lienzo.
El lienzo debe estar enfocado para capturar eventos clave. No es posible asignar el evento keydown al lienzo porque no es posible enfocar el lienzo con el cursor. Por lo tanto, una solución para este problema es enfocar el lienzo.
El siguiente ejemplo ilustra el enfoque de trabajo de addEventListner para keydown en el lienzo:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Working of addeventlistener
for keydown on a canvas
</title>
<style>
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;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<canvas id="canvas"></canvas>
<script>
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);
}
</script>
</body>
</html>
Salida: primero, el lienzo se enfoca en el uso del evento mousedown . Una vez que el lienzo se enfoca, se activa el evento keydown .
Publicación traducida automáticamente
Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA