Question

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

我尝试的是在这个例子中按下一个键时调用一个函数“ addFile（）”输入（13）不幸的是没有任何反应。我可以使用稍微编辑的 addFileOnKeyEvent（event）将onkeypress属性添加到输入“add-file”，但我正在尝试了解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

这不是事件的运作方式。试试这个......

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

而不是......

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

Answer 2

首先，addFileOnKeyEvent()在任何地方都不会被调用。因此，在尝试添加文件时必须调用它。或者，您必须默认将事件绑定到文本字段。

也不需要将事件对象传递给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>

找不到我的“addEventListener”函数的解决方案

2 个答案: