事件
事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
1.事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
2.语法
元素.addEventListener('事件',要执行的函数)
3.事件监听三要素：
①事件源： 那个dom元素被事件触发了，要获取dom元素
②事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
③事件调用的函数： 要做什么事
<body>
<button class="btn1">点我</button>
<script>
// 获取Dom元素
let btn1=document.querySelector('.btn1')
// 注册事件
// btn1.addEventListener('事件类型','处理函数')
// click 鼠标单击
btn1.addEventListener('click',function () {
console.log('我被鼠标点击了')
})
</script>
</body>
4.事件类型
鼠标触发
<body>
<div></div>
<script>
let div=document.querySelector('div')
div.addEventListener('click',function () {
console.log('click鼠标点击触发');
})
div.addEventListener('mouseenter',function () {
console.log('mouseenter鼠标经过触发')
})
div.addEventListener('mouseleave',function () {
console.log('mouseleave鼠标离开触发');
})
</script>
</body>
表单获得光标
<body>
<input type="text">
<script>
let input=document.querySelector('input')
input.addEventListener('focus',function () {
console.log('输入框 获得焦点');
let body=document.querySelector('body')
//点击输入框触发更换背景色
body.style.backgroundColor='red'
})
input.addEventListener('blur',function () {
console.log('失去焦点');
// 点击输入框外触发更换背景色
document.body.style.backgroundColor='pink'
})
</script>
键盘触发
<script>
document.body.addEventListener('keydown',function () {
// 按下键盘触发更改背景色
document.body.style.backgroundColor='skyblue'
})
document.body.addEventListener('keyup',function () {
// 抬起键盘触发更改背景色
document.body.style.backgroundColor='pink'
})
</script>
表单输入
<body>
<input type="text">
<script>
let input=document.querySelector('input')
input.addEventListener('input',function () {
console.log('只要在输入框输入了内容就会触发');
})
</script>
</body>
