使用addEventListener绑定表单submit事件后操作立即回退如何处理

问题原因 #

表单触发submit事件后，浏览器会默认执行表单提交逻辑：按照form标签配置的action地址、method请求方式提交数据。你的代码里action属性为空，会触发当前页面重载，刚写入段落的内容会随着页面刷新被重置，因此只会显示一瞬间。

解决方案 #

在submit事件的回调函数中，调用事件对象的preventDefault()方法，阻止浏览器的默认提交行为即可，修正后的代码如下：

let f = document.getElementById('f')
f.addEventListener('submit', function (e) {
    // 阻止表单默认提交、刷新页面的行为
    e.preventDefault()
    let text = document.querySelector('#txt').value
    document.getElementById('p1').innerHTML = text
})

额外提示 #

如果输入内容来自公开用户提交，建议将innerHTML替换为textContent赋值，避免用户输入恶意脚本触发XSS安全问题。

内容的提问来源于stack exchange，提问作者Larn