一、事件监听是什么？
让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
比如点击网页，鼠标经过...
1.1事件监听三要素
- 事件源：那个dom元素被事件触发了，要获取dom元素
- 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件处理的函数：要做什么事 一般是一个匿名函数函数
1.2事件监听的两种方法：
①dom对象.on事件类型 = 事件处理函数
（不推荐这种写法）
②推荐用 注册事件.addEventListener写法
效果与第一个一样的
注意点：
- 事件类型需要用括号括起来
- 选择器需要加上类. 或者标签# 整体用货号括起来
- .addEventListener不需要加on
来个例子感受下-关闭广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; width: 1000px; height: 200px; background-color: pink; margin: 100px auto; text-align: center; font-size: 50px; line-height: 200px; font-weight: 700; } .close { position: absolute; right: 20px; top: 10px; width: 20px; height: 20px; background-color: skyblue; text-align: center; line-height: 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div class="box"> 我是广告 <div class="close">X</div> </div> <script> const cl = document.querySelector('.close') const box = document.querySelector('.box') // 注意属性值需要 加上style，值用‘’包括起来 ‘’ cl.addEventListener('click', function () { box.style.display = 'none' }) </script> </body> </html>
二、鼠标事件
有两组为（没什么区别，后篇文章讲冒泡的时候再说）：
- mouseenter 鼠标经过 mouseleave 鼠标离开
- mouseover 鼠标经过 mouseout鼠标离开
三、键盘事件
有两个
keydown按下
keyup抬起
四、焦点事件
有两个
- focus 获取焦点
- blur 失去焦点
焦点事件长跟表单元素一起使用
五、事件对象
什么是事件对象？
- 事件对象是个对象，这个对象里保存事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就保存了鼠标点击的坐标值
// 事件对象：一般命名为event、ev、e 事件源.addEventListener('事件类型', function(事件对象) { console.log(事件对象) }) // 形参 e 就是事件对象 document.querySelector('.btn').addEventListener('click', function(e){ }) document.addEventListener('mousemove', function(e){ })
