<style>
input {
width: 400px;
}
div {
width: 406px;
height: 400px;
border: 1px solid black;
}
</style>
<body>
<input type="text">
<button>搜索</button>
<div></div>
<script>
// 获取元素
let input = document.querySelector('input')
let btn = document.querySelector('button')
let div = document.querySelector('div')
// 给搜索按钮注册鼠标点击事件
btn.onclick = function () {
alert('正在搜索')
}
// 注册键盘按下事件
input.onkeydown = function () {
console.log('键盘按下');
}
// 按键产生字符事件
input.onkeypress = function () {
console.log('产生字符');
}
// 按键弹起事件
input.onkeyup = function (e) {
console.log('键盘弹起');
// 键盘弹起更新内容
// div.innerHTML = input.value
// 判断是否是回车键
if (e.keyCode === 13) {
div.innerHTML = input.value
// 调用按钮点击事件
// 注意；该按钮注册点击事件要加on ,触发是不需要加on
// onclick 用于注册点击事件 click用于执行事件
btn.click()
}
}
</script>
</body>
