Javascript 在元素焦点上添加事件侦听器

我有一个搜索框输入，当点击图标时打开。我希望在单击图标时提供输入焦点，并调用函数addLabel（），该函数将标签添加为占位符文本，直到触发“onkeydown”事件，此时它应该调用函数removeLabel（）。当前，我的脚本添加了focus（），但不确认其他事件侦听器。任何帮助都将不胜感激

window.onload=function（）{
var el=document.getElementById（'gsc-i-id1'）；
var label=document.createElement（'label'）；
var labelText=document.createTextNode（'输入搜索词…'）；
label.appendChild（labelText）；
label.className+=“搜索标签占位符”；
var searchParent=el.parentNode；
searchParent.insertBefore（标签，el）；
var searchIcon=document.getElementById（'search-icon'）；
searchIcon.addEventListener（'click'，函数（e）{
el.addEventListener（“焦点”，addLabel）；
el.addEventListener（'keydown'，removeLabel）；
el.focus（）；
}，假）；
函数removeLabel（）{
el.style.textIndent='0'；
el.setAttribute（'placeholder'，'removeLabel'）；
el.style.background='none'；
el.style.textIndent='0'；
label.style.display='none'；
};
函数addLabel（）{
el.style.textIndent='0'；
el.setAttribute（'placeholder'，'addLabel'）；
el.style.background='none'；
el.style.textIndent='0'；
label.style.display='block'；
};
};





搜寻


菜单


输入您的搜索词。。。
技术支持
您的代码是否正常。可操作小提琴：

检查dom中的输入元素-开始键入时，它有“removeLabel”占位符

所以当你链接到fiddle时需要一些代码，所以：

searchIcon.addEventListener('click', function(e) {
  console.log('clicked');
  el.addEventListener('focus', addLabel );
  el.addEventListener('keydown', removeLabel );
  el.focus();
}, false );

如果您提供一个完整的（可运行的）示例，那么帮助您会更容易。这意味着在您的情况下，也要添加HTML标记。@ssc-hrep3我已经添加了HTML标记