removeEventListener onfocusout после нажатия клавиши ввода для тега ввода - ошибка не определена

Question

Это первый javascript, который я правильно пытаюсь выполнить.

Чего я пытаюсь достичь:

• пользователь фокусируется на элементе ввода, а данные из атрибутов сохраняются в переменных
• keyup добавлен прослушиватель событий к элементу ввода
• когда пользователь нажимает ввод, значение отправляется через ajax в базу данных
• после нажатия клавиши ввода удалить прослушиватель событий

Примечание: Идентификатор входного элемента динамически создается с помощью php, поэтому причина update(this.id).

Моя проблема в том, что появляется ошибка, когда я сосредотачиваюсь на элементе, и я не думаю, что аргумент removeEventListener() handler соответствует addEventListener(), это правильный способ соответствия тот же обработчик, который использовался в addEventListener?

В этой статье написано

Обратите внимание: если мы не сохраним функцию в переменной, мы не сможем ее удалить.

Именно поэтому я поместил аргумент handler в функцию enter().

Любая помощь наиболее ценится!

Другие ссылки:
Вызов Ajax при нажатии клавиши ввода
Документация removeEventListener

JavaScript:

function enter() {
    function(event) {
        console.log("Key has been released")
        event.preventDefault()
        //in the event of the user releasing 'ENTER' on the keyboard
        if (event.keyCode === 13) {
            console.log("'ENTER' key pressed")
            //creates variable to store the value of the element (attribute 'value', of input element: value='". $row['may'] .""')
            var inputValue = input.value
            // alert(input.value)
            $.ajax({
                type: 'POST',
                url: 'php script/update_values.php',
                dataType: "json",
                async:false,
                data: {id : id, input : inputValue, owner : owner, monthName : monthName},
                success: function(response){
                    console.log(response.ajaxResponse)
                }
            });
        }
    }
}
//onfocus calls function with id='x' in contstructor to update score
function update(x) {
    console.log("User focused on input element.")
    //variable to assign the input element being updated 
    var input = document.getElementById(x)
    //store data in variables to be sent to script
    var id = input.getAttribute("data-id")
    var owner = input.getAttribute("data-owner")
    var monthName = input.getAttribute("data-monthName")

    //add an event listener to the input element (if a key is released executes 'function(event)')
    input.addEventListener("keyup", enter)
    input.removeEventListener("keyup", enter)

}

<input id="1" onfocus="update(this.id)" data-reference="1" data-owner="Joe Bloggs" data-monthName="dec" data-monthValue="" type="" value="220000"/>

Answer 1

Я не уверен, почему вы делаете это так, как вы, потому что это очень грязно, но вот мой вклад.

Я разделил обработчики и события, чтобы потом их удалить.

---

let input = document.querySelector('#myInput');
let id, owner, monthName;

let keyupHandler = e => {
  e.preventDefault();

  if (e.keyCode === 13) { // Enter key
    let inputValue = input.value;

    console.log(`Enter pressed.\nInput value: ${inputValue}\nProceeding AJAX call.`);

    $.ajax({
      type: 'POST',
      url: 'php script/update_values.php',
      dataType: "json",
      async: true, // asyn: false = deprecated
      data: {
        id: id,
        input: inputValue,
        owner: owner,
        monthName: monthName
      },
      success: function(response) {
        console.log(response.ajaxResponse);
        input.removeEventListener('keyup', keyupHandler);
        console.log("Removed keyup event");
      },
      error: function(err) {
        console.log(err);
        input.removeEventListener('keyup', keyupHandler);
        console.log("Removed keyup event");
      }
    });
  }
}

let focusHandler = e => {
  id = input.getAttribute("data-id")
  owner = input.getAttribute("data-owner")
  monthName = input.getAttribute("data-monthName")
  console.log(`Stored Data.\ndata-id: ${id}\ndata-owner: ${owner}\ndata-monthName: ${monthName}`);

  input.removeEventListener('focus', focusHandler);
  console.log("Removed focus event");
}

input.addEventListener('focus', focusHandler);

input.addEventListener('keyup', keyupHandler);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="myInput" data-id="1" data-reference="1" data-owner="Joe Bloggs" data-monthName="dec" data-monthValue="" type="" value="220000" />

Answer 2

Прежде всего не имеет смысла определять функцию внутри другой и никуда не вызывать. Также, если это анонимная функция. Но я думаю, что вы были перепутаны с предложением if we don’t store the function in a variable, then we can’t remove it.

В вашем случае вы добавляете функцию-обработчик в свой EventListener. Если вы немедленно удалите слушателя, это не будет иметь никакого эффекта. Поэтому, возможно, вы хотите удалить обработчик слушателя, как только он будет вызван. Оказавшись в функции обработчика, ваш первый параметр - это сам объект события, так что вы можете получить доступ к целевому элементу. Затем оттуда вы можете удалить слушателя.

function enter(event) {

        console.log("Key has been released")
        event.preventDefault()
        //in the event of the user releasing 'ENTER' on the keyboard
        if (event.keyCode === 13) {
            console.log("'ENTER' key pressed")
            //creates variable to store the value of the element (attribute 'value', of input element: value='". $row['may'] .""')
            input = event.target;
            
            // alert(input.value)
            $.ajax({
                type: 'POST',
                url: 'php script/update_values.php',
                dataType: "json",
                async: false,
                data: {
                    id: input.id,
                    input: input.value,
                    owner: input.dataset.owner,
                    monthName: input.dataset.monthName
                },
                success: function (response) {
                    console.log(response.ajaxResponse)
                }
            });
        }
    input.removeEventListener("keyup", enter)
}
//onfocus calls function with id='x' in contstructor to update score
function update(input) {
    console.log("User focused on input element.", input)
    //variable to assign the input element being updated 
    
    //store data in variables to be sent to script
    var id = input.getAttribute("data-id")
    var owner = input.getAttribute("data-owner")
    var monthName = input.getAttribute("data-monthName")

    //add an event listener to the input element (if a key is released executes 'function(event)')
    input.addEventListener("keyup", enter)


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="1" onfocus="update(this)" data-reference="1" data-owner="Joe Bloggs" data-monthName="dec" data-monthValue="" type="" value="220000"/>