Q:

addEventListener per element only

I want to make my canvas to exclusively respond to keydown/mouse EventListeners only.
Another user had this problem: addEventListener for keydown on Canvas
But the problem still persists: I have a canvas and an input box. I have the spacebar to trigger an event but when I want to type in an input element box, it will trigger as well.
How do I make keydown/mouse events exclusive for the canvas so it won't affect other elements such as my input?
 //js file
 gameCanvas = document.getElementById('gameCanvas');
 document.addEventListener("keydown", function(e){
    if(e.keyCode == 32) // triggers something in canvas
 }, false); 

 //html dom
 <canvas id="gameCanvas" tabindex='1'></canvas>

 //input that accidentally triggers the above event meant for canvas
 <input type="text" id="conversation"></input>

A:

You can create separate keydown/click event for each of your input/canvas.
To get canvas to response to keydown you need to add tabindex="1".
Like so <canvas id="gameCanvas" tabindex="1"></canvas>
Both input and canvas will response to keyboard event when the right elements are selected and triggered when keys are pressed. If you prefer click event just replace keydown with click instead.

//js file
 gameCanvas = document.getElementById('gameCanvas');
 conversation = document.getElementById('conversation');

 gameCanvas.addEventListener("keydown", function(e){
    console.log(gameCanvas);
 }, false); 

 conversation.addEventListener("keydown", function(e){
    console.log(conversation);
 }, false);
#gameCanvas {
    background: blue;
    width: 100px;
    height: 100px;   
}
<p>gamecanvas</p>
<canvas id="gameCanvas" tabindex="1"></canvas><br />
<p>conversation</p>
 <input  id="conversation" type="text" tabindex="2"></input>

