Получение вложенного li из eventlistener 'keyup'

Question

У меня есть вложенный li, который можно редактировать.Как я могу получить конкретный li, когда на этом li произошло событие 'keyup'?Нет jQuery, пожалуйста.

Я пытался поместить 'keyup' eventlistener на все li, но e.target дает самый внешний li (li # 1) вместо (li # 4).когда я тестировал с событием 'click', он дает точный ключ li (li # 4).

var numberList = document.querySelector("#numberList");
numberList.addEventListener('keyup', handler)

function handler(e){
  if(e.type === 'keyup'){
        getId(e)
    }
}

<ul id = "numberList">
<li id="1">
    one
    <ul>
        <li id="2">
            two
            <ul>
              <li id="4">four</li>
            </ul>
        </li>
        <li id="3">three</li>
    </ul>
<li id = "5">
    Five
    <ul>
        <li id="6">six</li>
    </ul>
   </li>

Если я редактирую li со значением "four", я должен получить li с id = "4", а не id = "1"

Answer 1

<li> не является фокусируемым элементом клавиатуры. Он не будет регистрировать события нажатия клавиш, такие как ввод HTML-формы, кнопки, привязки или другие интерактивные типы.

Возможное решение - добавить кнопку в элементы списка, чтобы они получили событие, а затем переместились вверх, чтобы выбрать идентификатор родительского элемента (элемента списка).

<li id="1">
    <button>one</button>
    <ul>
        <li id="2">
            <button>two</button>
            <ul>
              <li id="4"><button>four</button></li>
            </ul>
        </li>
        <li id="3"><button>three</button></li>
    </ul>
</li>

Answer 2

Ваш комментарий привлек мое внимание ...

когда я создаю li, я добавляю li.contentEditable = "true";

Итак, если я правильно понимаю, вы используете JavaScript для генерации элементов DOM. Если это так, когда вы генерируете свой contentEditable li одновременно, вы можете назначить для него прослушиватель событий.

'use strict';

let ul1 = document.createElement('ul');
    ul1.id = 'numberList';

let li1 = document.createElement('li');
    li1.innerHTML = 'one';
    li1.id = 'li1';

let ul2 = document.createElement('ul');
    ul2.id = 'ul2';

let li2 = document.createElement('li');
    li2.innerHTML = 'two';
    li2.id = 'li2';

let ul3 = document.createElement('ul');
    ul3.id = 'ul3';

let li3 = document.createElement('li');
    li3.innerHTML = 'four';
    li3.id = 'li3';
    li3.contentEditable = true;
    li3.addEventListener('keyup', handler);

function handler(e){
  if(e.type === 'keyup'){
        console.log( this.id );
    }
}

ul3.appendChild( li3 );
li2.appendChild( ul3 );
ul2.appendChild( li2 );
li1.appendChild( ul2 );
ul1.appendChild( li1 );
document.body.appendChild( ul1 );