Web APIs 2（事件监听）
1.事件监听
-
语法：
元素对象.addEventListener(‘事件类型’，要执行的函数)
- 事件源：获取的dom元素
- 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数：要做的事情
//点击x图标关闭广告
<button>点击</button><div class="box"><p>我是一个广告</p><i class="bi bi-x-circle"></i></span></div><script>const btn = document.querySelector('button')btn.addEventListener('click', function () {alert("事件监听成功！")})const x = document.querySelector('.box i')const box = document.querySelector('.box')x.addEventListener('click', function () {box.style.display = 'none'})
2.事件类型
- 鼠标事件：click、mouseenter（鼠标经过）、mouseleave（鼠标离开）
- 焦点事件（表单）：focus（获得焦点）、blur（失去焦点）
- 键盘事件：Keydown(键盘按下触发)、Keyup(键盘抬起触发)
- 文本事件：input（用户输入事件）
3.事件对象
-
概念：事件对象中有事件触发时的相关信息
- eg:鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
- eg:用户按下哪个键，比如按下回车键发送消息
-
语法：
- 事件监听绑定的回调函数的第一个参数就是事件对象，一般命名为event\ev\e
元素.addEventListener('click',function(e){ }) -
属性：
- type:事件类型
- clientX/clientY:获取光标对于浏览器课件窗口左上角的位置
- offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
- key:用户按下的键盘键的值
<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('keyup', function (e) {console.log(e.key)if (e.key === 'Enter') {//当需要按下回车键才发送时，就可以采用事件对象，当事件对象的key属性为回车时，触发发送console.log('我按下了回车键')}})</script>
</body>
4.环境对象this
- 指的是函数内部特殊的变量this，代表当前函数运行时所处的环境
- 判断this指向的粗略规则：【谁调用，this就指向谁】
- 作用：使得代码更简洁
5.回调函数
- 概念：函数A作为参数传递给函数B时，我们称函数A为回调函数
