javascript - 找不到我的 "addEventListener"函数的解决方案

Question

我在尝试使用 addEventListener 时遇到了问题。我确实尝试在网上找到解决方案，但我认为我的知识有限，无法选择合适的答案。

我尝试的是在这个例子中按下一个键时调用函数“addFile()”enter(13) 不幸的是没有任何反应。我可以通过稍微编辑 addFileOnKeyEvent(event) 将 onkeypress 属性添加到输入 “添加文件”，但我试图了解我的 eventListener 有什么问题。

我希望你能听懂我的解释，因为这是我的第一个问题。 :)

function addFile() {
  var x = document.getElementById("add-file").value;
  x = x + ".xml";
  var lbl = document.createElement("label");
  var node = document.createTextNode(x);
  lbl.appendChild(node);

  var element = document.getElementById("appendable");
  element.appendChild(lbl);
}

function addFileOnKeyEvent(event) {
  var evt = event.keyCode;
  var textField = document.getElementById("add-file").addEventListener("keypress", function() {
    if (evt == 13) {
      addFile();
    }
  });
}

<label>Dateien</label>
<input id="add-file" type="text" onclick="this.select();">
<button type="submit" onclick="addFile()">Hinzufügen</button>
<div class="data-display">
  <span id="appendable"></span>
</div>

Answer 1

起初，addFileOnKeyEvent() 从未在任何地方调用过。所以当你尝试添加文件时你必须调用它。或者您必须默认将事件绑定(bind)到文本字段。

也不需要将事件对象传递给 addFileOnKeyEvent()。 事件必须在 addEventListener 回调函数中捕获。

function addFile() {
  var x = document.getElementById("add-file").value;
  x = x + ".xml";
  var lbl = document.createElement("label");
  var node = document.createTextNode(x);
  lbl.appendChild(node);

  var element = document.getElementById("appendable");
  element.appendChild(lbl);
}

function addFileOnKeyEvent() {
  document.getElementById("add-file").addEventListener("keypress", function(event) {
    var evt = event.keyCode;
    if (evt == 13) {
      addFile();
    }
  });
}
// call the function here
addFileOnKeyEvent();

   // else just put the event handler part alone. The function is unnecessary here.

<label>Dateien</label>
<input id="add-file" type="text" onclick="this.select();">
<button type="submit" onclick="addFile()">Hinzufügen</button>
<div class="data-display">
  <span id="appendable"></span>
</div>