Does a delegated element need to have focus to fire a keyboard event?

Question

The below keyboard handler assignment statement, which properly fires the anonymous function when the user presses the Escape key in any of the specified textarea elements, but not when the table is showing containing the td elements, also specified in this statement:

$( 'div.your-videos' )
.on( 'keydown keypress',
'textarea.webvideourlURI, ' +
'textarea.webvideourlPicture, ' +
'textarea.webvideourlTitle, ' +
'textarea.webvideourlDescription, ' +
'td[name="ytPictureSelect"]',
function( event ) {
  const RETURN = 13;
  const TAB = 9;
  const ESCAPE = 27;

  var value = true;

  if( event.keyCode === ESCAPE ) {

    event.preventDefault(); // cancel default actions
    value = false;
    webvideourlTextarea_Blur( event );

  }
  else if( ( event.keyCode === TAB ) || ( event.keyCode === RETURN ) ) {

    event.preventDefault(); // cancel default actions
    value = false;
    event.target.blur();

  } // if( event.keyCode === ESCAPE ) ...
    // else if( ( event.keyCode === TAB ) || ( event.keyCode === RETURN ) ) ...

  return( value );
} ); // End of anonymous keydown/keypress handler function.

Here is the table definition:

<table id="ytPictureSelect" tabindex="0"
       style="display: inline-block; position: relative; z-index: 9000; box-shadow: 3px 3px grey;" 
       title="Select a YouTube image or Other." size="12" selectedindex="5">
  <tbody>
    <tr><td name="ytPictureSelect" value="not set" youtube="no" title="Not set">Not set</td></tr>
    <tr><td name="ytPictureSelect" value="maxresdefault" youtube="yes" title="Maximum Resolution">Max Res</td></tr>
    <tr><td name="ytPictureSelect" value="sddefault" youtube="yes" title="Standard Definition">Std-Def</td></tr>
    <tr><td name="ytPictureSelect" value="hqdefault" youtube="yes" title="High Quality">HQ-Def</td></tr>
    <tr><td name="ytPictureSelect" value="mqdefault" youtube="yes" title="Medium Quality">MQ-Def</td></tr>
    <tr><td name="ytPictureSelect" value="default" youtube="yes" selected="selected" title="Default definition">Default</td></tr>
    <tr><td name="ytPictureSelect" value="0" youtube="yes" title="Alternate image">Alt-1</td></tr>
    <tr><td name="ytPictureSelect" value="1" youtube="yes" title="Alternate image">Alt-2</td></tr>
    <tr><td name="ytPictureSelect" value="2" youtube="yes" title="Alternate image">Alt-3</td></tr>
    <tr><td name="ytPictureSelect" value="3" youtube="yes" title="Alternate image" style="border-bottom: thin solid black;">Alt-4</td></tr>
    <tr><td name="ytPictureSelect" value="Other Webpage" youtube="no" title="Non-YouTube webpage image">Other Webpage</td></tr>
    <tr><td name="ytPictureSelect" value="Local Image File" youtube="no" title="Upload a local image file" disabled="">Local Image File</td></tr>
  </tbody>
</table>

Actually, there are several copies of this table, one for each video item in the your-videos div list. The textarea elements also appear multiple times in the same list.

Is the table or its td elements lacking the focus the reason why the function is not called when the Escape key pressed?

How can I make the td elements 'listen' to the Escape keyboard event?

Note, the reason I am not assigning the keyboard events directly to the td elements is there could be many videos in the list and each of these had its own table containing 12 td elements, so is is probably better to use the delegated keydown/keypress keyboard event handler.

By the way, when this is working, I want to extend the function to support using the arrow keys.

Note, I am using a table to simulate a select element because with a select it shows strangely in some browsers when it is nested in amongst other elements in a list and, more importantly, clicking on an already selected option doesn't cause the select to be reselected and close the 'drop-down-list'. With a table simulating a select, clicking on any of the td (option) elements does select it and close the 'drop-down-list', whether the option was previously selected or not.

UPDATE: I modified the list of elements in the event handler function assignment statement to replace the 'td[name="ytPictureSelect"]', with

 'table#ytPictureSelect, ' +
 'table#ytPictureSelect>tbody>tr>td',

which includes the table and the td elements. Then in the code that displays the table, I added a statement that focuses on the table being displayed.

So, the short answer is Yes, the element does need to have the focus in order to fire the event handler function. Since, in my case the focus is on the table, not the td elements, then the individual td elements probably doesn't need to in the event handler function assignment statement, but I'll probably going to need them when I implement moving the highlight between the td elements using the arrow keys.

Thank you.

Answer 1

Yes the element does need to have the focus in order that the keyboard events keydown and keypress will fire.