 <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Events/keydown" rel="nofollow">keydown</a> event supports event bubbling, so you can just add the handler to the <code>container</code> element like</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelectorAll('.container')[0].addEventListener('keydown', function(e) { console.log('keypressed', this, e); //e.target will refer to the actual event target log('down in `' + e.target.innerHTML + '` with keycode: ' + (e.keyCode)) }) function log(msg) { document.querySelector('#log').innerHTML = msg; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt; &lt;p tabindex="1"&gt;content&lt;/p&gt; &lt;p tabindex="1"&gt;in enough different elements&lt;/p&gt; &lt;p tabindex="1"&gt;that making listeners&lt;/p&gt; &lt;p tabindex="1"&gt;for all of them&lt;/p&gt; &lt;p tabindex="1"&gt;would be a huge pain&lt;/p&gt; &lt;/div&gt; &lt;div id="log"&gt;&lt;/div&gt;</code></pre> </div> </div> </p>