Javascript 附加项立即被删除

我试图理解eventListeners的基础知识，我创建了一个简单的表单，我只想向UL添加一个输入值，但是当我添加该值时，我能够在列表中看到它一秒钟，然后它立即被删除，我不明白为什么，有人能帮我吗

const submitButton = document.querySelector('#add-task-btn');
const clearButton = document.querySelector('#remove-task-btn');
const item = document.querySelector('#task');
const taskList = document.querySelector('.collection');

allEventListeners();

function allEventListeners(){

    submitButton.addEventListener('click', function(){

        if (item.value === ''){
            alert('Please add a task')
        };

        const li = document.createElement('li');
        li.appendChild(document.createTextNode(item.value));

        taskList.appendChild(li);

        item.value = "";

    })
}

---

您只需要为处理程序函数提供一个事件参数，然后调用

preventDefault（）

---

你能分享你的html吗？提交按钮导致表单被提交并重新加载页面…？！正如@deceze指出的，按钮正在触发一个提交事件。您需要在eventHandler函数Yes@deceze中使用

ev.preventDefault（）

，它已重新加载，这里是指向html@Jackson的链接谢谢，我没有将任何内容传递到我的函数中，因此在传递ev并使用建议的ev.preventDefault（）之后，它已经工作了，preventDefault做了什么？

submitButton.addEventListener('click', function(ev){
  ev.preventDefault(); // prevent the page submit

  //...

});