事件监听的三要素
事件源：哪个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件要调研的函数：触发后要做什么事
事件绑定方式
<body>
<button onclick="btn()">第一种原生函数</button>
<button id="demo">在JavaScript代码中绑定</button>
<button class="box">绑定事件监听函数</button>
<script>
// 第一种原生函数
function btn() {
alert(111)
}
// 在JavaScript代码中绑定
document.getElementById("demo").onclick = function () {
alert(222); // this 指当前发生事件的HTML元素，这里是<div>标签
}
// 常用绑定事件监听函数
let btn = document.querySelector('.box')
btn.addEventListener('click', function () {
alert('7777')
})
</script>
</body>
语法：元素.addEveentListener(‘事件类型’，触发事件类型后要执行的函数)
事件类型：
鼠标事件：鼠标触发
click 鼠标点击
`<body>
<button>点我啊</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('1234')
})
</script>
</body>`
mouseenter 鼠标经过，当鼠标进入到该元素的范围就会自动触发
`div.addEventListener('mouseenter', function () {
})`
mouseleave 鼠标离开，鼠标离开该元素的范围就会自动触发
`div.addEventListener('mouseleave', function () {
})`
焦点事件：表单获得光标
focus 获得焦点，文本框获取焦点，焦点就是光标点
// 1.获取元素
let input = document.querySelector('input')
// 2.给input添加监听事件,让文本框获取光标
input.addEventListener('focus', function () {
})
blur 失去焦点，只要文本框失焦就会触发，不关注内容是否变化
// 1.获取元素
let ul = document.querySelector('ul')
// 2.给input添加监听事件,让文本框失焦
input.addEventListener('blur', function () {
ul.style.display = 'none'
})
键盘事件：键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发
文本事件：表单输入触发
input 用户输入事件，文本输入框内容变化所触发的事件，只要内容变化就会触发
change:文本框失焦事件，前提是内容改变了
change:对于表单元素file而言，它 是用户选择好文件之后触发
