单击文本框外时未激活Vanilla Javascript模糊事件

document.addEventListener（'DOMContentLoaded'，function（）{
const list=document.querySelector（'.output ul'）；
const searchInput=document.querySelector（'.output-input'）；
const searchBtn=document.querySelector（'.output button'）；
const historyDiv=document.querySelector（'.output.search'）；
list.innerHTML=''；
让我的历史=[]；
historyDiv.style.visibility=“hidden”；
函数addToHistory（）{
//我们只允许在搜索输入不是空的情况下输入一个术语
控制台日志（“按钮点击”）；
如果（searchInput.value！=''）{
//第一
myHistory.push（searchInput.value）；
log（`searchInput.value}添加到历史记录`）；
//清空列表，这样我们就不会显示重复的条目
//每次输入搜索词时都会重新生成显示。
list.innerHTML=''；
//循环遍历数组，并显示列表中的所有搜索词
for（设i=0；i=5）{
//二号
myHistory.shift（）；
}
//清空搜索输入并将其聚焦，为下一个要输入的术语做好准备
searchInput.value=''；
searchInput.focus（）；
}
}
searchBtn.addEventListener（'click'，addToHistory'）；
searchInput.addEventListener（'focus'，function（）{
控制台日志（“聚焦”）；
如果（myHistory.length>0）{
historyDiv.style.visibility=“可见”；
}
});
searchBtn.addEventListener（'blur'，function（）{
控制台日志（“模糊”）；
historyDiv.style.visibility=“hidden”；
});
});

搜寻


您最近的搜索词：

您需要在输入上设置
模糊
事件侦听器，而不是按钮。更改：

searchBtn.addEventListener('blur', function() {
   ^

致：


const list=document.querySelector（'.output ul'）；
const searchInput=document.querySelector（'.output-input'）；
const searchBtn=document.querySelector（'.output button'）；
const historyDiv=document.querySelector（'.output.search'）；
list.innerHTML=''；
让我的历史=[]；
historyDiv.style.visibility=“hidden”；
函数addToHistory（）{
//我们只允许在搜索输入不是空的情况下输入一个术语
控制台日志（“按钮点击”）；
如果（searchInput.value！=''）{
//第一
myHistory.push（searchInput.value）；
log（`searchInput.value}添加到历史记录`）；
//清空列表，这样我们就不会显示重复的条目
//每次输入搜索词时都会重新生成显示。
list.innerHTML=''；
//循环遍历数组，并显示列表中的所有搜索词
for（设i=0；i=5）{
//二号
myHistory.shift（）；
}
//清空搜索输入并将其聚焦，为下一个要输入的术语做好准备
searchInput.value=''；
searchInput.focus（）；
}
}
searchBtn.addEventListener（'click'，addToHistory'）；
searchInput.addEventListener（'focus'，function（）{
控制台日志（“聚焦”）；
如果（myHistory.length>0）{
historyDiv.style.visibility=“可见”；
}
});
searchInput.addEventListener（'blur'，function（）{
控制台日志（“模糊”）；
historyDiv.style.visibility=“hidden”；
});

搜寻


您最近的搜索词：


searchInput.addEventListener('blur', function() {
   ^