添加事件监听
<body>
<button>点击按钮</button>
<script>
document.querySelector('button').addEventListener('click',function(){
alert('what can i say')
})
</script>
</body>事件类型
焦点事件
<body>
<div class="mi">
<input type="search" placeholder="笔记本">
<ul class="result-list">
<li><a href="#">惠普</a></li>
<li><a href="#">红米</a></li>
<li><a href="#">联想</a></li>
<li><a href="#">华为</a></li>
<li><a href="#">外星人</a></li>
</ul>
</div>
<script>
const input=document.querySelector('.mi input')
const ul=document.querySelector('ul');
input.addEventListener('focus',function(){
ul.style.display='block';
})
input.addEventListener('blur',function(){
ul.style.display='none';
})
</script>
</body>
当这个input标签获取到焦点时，出现了笔记本的种类
键盘事件
<body>
<input type="text" placeholder="笔记本">
<script>
const box=document.querySelector('input');
box.addEventListener('input',function(){
console.log(box.value);
})
</script>
</body>
