Javascript 使用addEventListener处理表单提交时，执行的操作将立即恢复

我的网页有一个简单的表单，带有输入框和提交按钮，还有一个空段落：

<form action="" class="form" method="post" id="f">
    <input type="text" name="text" id="txt" value="">
    <input type="submit" name="submitButton" value="go">
</form>
<p id="p1"></p>

let f = document.getElementById('f')
f.addEventListener('submit', function () {
    let text = document.querySelector('#txt').value
    document.getElementById('p1').innerHTML = text
})

---

它有点有效，这意味着它确实显示了段落中的文本，但只显示了一瞬间，然后就消失了。我缺少什么？

您需要更改输入类型“提交到”按钮。这将不会重新加载页面

function callClick(){
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text;
}
</script>
<form action="" class="form" method="post">
    <input type="text" name="text" id="txt" value="">
    <input type="button" id="f" name="submitButton" value="go" onclick="callClick()">
</form>
<p id="p1"></p>

函数callClick（）{
让text=document.querySelector（'#txt'）.value
document.getElementById（'p1'）。innerHTML=text；
}

当我试图阻止人们复制我的图像时，我使用了一个事件侦听器

---

您只需将contextmenu更改为p1，然后将#txt更改为txt

您需要

preventDefault

let f = document.getElementById('f');
f.addEventListener('submit', function(e) { // access the submit event
  e.preventDefault(); // prevent the default behavior of the submit event
  let text = document.querySelector('#txt').value
  document.getElementById('p1').innerHTML = text
});

---

从表单中删除

action

属性，一切都会像魔术一样工作；）它没有恢复。您正在提交表单，页面将重新加载。这是否回答了您的问题？我想你是指f？不管怎样，它不起作用。控制台告诉我preventDefault不是一个函数。否。。它是

e.preventDefault

。你把e作为参数传递给你的函数了吗？看一看：你说得对，我没有。所以“e”只是一个随机字符，对吗？只是在现场创建的一个对象，我们可以将函数附加到该对象？当您使用

addEventListener

时，您会将函数传递给它。此函数接受事件对象。此对象包含有关事件的所有信息

e

只是给偶数对象的一个随机名称。你可以给它取任何你想要的名字。例如，如果将其命名为

event

，则使用

event.preventDefault（）

。如果将其命名为

Larn

，则使用

Larn.preventDefault（）