javascript - 连接功能onclick和onkeyup(joining functions onclick and onkeyup)

Question

I just went over my code with an experienced developer and he made a lot of very helpful changes, but, unfortunately, the code did not save properly and I lost all the edits!!!

(我只是和一个经验丰富的开发人员一起检查了我的代码，他做了很多非常有帮助的更改，但是不幸的是，代码没有正确保存，我丢失了所有编辑！)

The main thing he helped with was eliminating some of my code repetition.

(他帮助的主要事情是消除了一些代码重复。)

I have two functions that share a lot of code: //Add item to To-Do List with "Add" Button AND //Add item to list with ENTER KEY.

(我有两个共享大量代码的函数：//使用“添加”按钮将项目添加到待办事项列表中，以及//使用ENTER键将项目添加到列表中。)

What he did for this was to add the bulk of these functions to the //Add new item to To-Do List function, so the other functions were simpler.

(他为此所做的就是将大量这些功能添加到//向待办事项列表功能添加新项，因此其他功能更简单。)

I forgot how he did this, though!

(我忘记了他是怎么做到的！)

If anyone can help I would really appreciate it!

(如果有人可以提供帮助，我将不胜感激！)

//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();

  }

Here is the Fiddle: https://jsfiddle.net/Rassisland/7bkcLfhu/

(这是小提琴： https : //jsfiddle.net/Rassisland/7bkcLfhu/)

  ask by Rassisland translate from so

Answer 1

To avoid code duplication, save your function to a variable, and then reference it using as many event handlers are applicable.

(为避免代码重复，请将函数保存到变量，然后使用尽可能多的事件处理程序对其进行引用。)

The important lesson here is you don't always need to use anonymous functions.

(这里重要的一课是您不必总是使用匿名函数。)

 ;(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>