使用addEventListener绑定click事件时代码为何重置？

为什么LI元素只显示一瞬间就消失？ #

你的按钮大概率嵌套在<form>标签内部。点击按钮时，浏览器会默认触发表单的提交行为，页面随即刷新——刚添加的LI元素还没被持久化就被页面重置，所以只能看到一瞬间。

解决办法 #

1. 阻止默认提交行为

在click事件回调中加入event.preventDefault()，取消浏览器的默认表单提交动作：

const searchBtn = document.querySelector('#searchBtn');
const list = document.querySelector('#uls');

searchBtn.addEventListener('click', function (event) {
    event.preventDefault(); // 关键：阻止表单默认提交
    const movieName = document.createElement('LI');
    const text = "works";
    list.append(movieName);
    movieName.innerHTML = text;  
});

2. 修改按钮类型

如果该按钮不需要执行表单提交功能，直接给按钮添加type="button"属性，让浏览器不把它识别为提交按钮：

<button id="searchBtn" type="button">点击添加</button>

为什么之前的submit事件能正常工作？ #

你之前监听submit事件时，应该已经在回调函数中调用了event.preventDefault()阻止了页面刷新，所以元素能正常保留。而这次使用click事件时没处理默认行为，才出现了差异。

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