Объединение функций onlick и onkeyup

Question

Я только что просмотрел свой код у опытного разработчика, и он внес много очень полезных изменений, но, к сожалению, код не сохранился должным образом, и я потерял все изменения!!!

Главное, с чем он помог, это устранение некоторых повторений моего кода. У меня есть две функции, которые совместно используют много кода: // Добавить элемент в список дел с помощью кнопки "Добавить" И // Добавить элемент в список с помощью клавиши ВВОД.

Для этого он добавил большую часть этих функций в функцию // Добавить новый элемент в список дел, чтобы другие функции были проще. Я забыл, как он это сделал, хотя! Если кто-то может помочь, я был бы очень признателен!

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb_" + totalItems;
  checkbox.onclick = updateStatus;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.textContent = itemText;


  var spanDelete = document.createElement("span2");
  spanDelete.id= "spanDelete_" + totalItems;
  spanDelete.textContent = "DELETE";
  spanDelete.onclick = deleteItem;


  var spanEdit = document.createElement("span3")
  spanEdit.id = "editId_" + totalItems;
  spanEdit.textContent = "EDIT";
  spanEdit.onclick = editItem;

  listItem.appendChild(checkbox);
  listItem.appendChild(span);
  listItem.appendChild(spanDelete);
  listItem.appendChild(spanEdit);


  list.appendChild(listItem);
}

//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();
  }
}


  //Add item to To-Do List with "Add" Button
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = function() {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }


    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();

  }

Вот скрипка: https://jsfiddle.net/Rassisland/7bkcLfhu/

Answer 1

Чтобы избежать дублирования кода, сохраните свою функцию в переменной, а затем на нее ссылайтесь, используя столько обработчиков событий, сколько применимо. Важным уроком здесь является то, что вам не всегда нужно использовать анонимные функции.

;(function(){
  "use strict";
  
  var button = document.getElementById('button');
  
  var doStuff = function(event){
    //  do some stuff
    alert('i did some stuff');
  };
  
  document.addEventListener('keypress',doStuff);
  button.addEventListener('click',doStuff);
  
})();

<button id="button" name="button">i am a button</button>

<textarea id="textarea" name="textarea">press a key</textarea>