Apis-Day2

事件监听

什么是事件?

• 页面中操作的动作
• 例如鼠标点击，进入或者离开…

事件监听三要素

• 事件源：（绑定事件的对象）
• 事件类型：（事件方式）
• 事件处理函数：（事件触发执行操作）

绑定事件

1. 常用鼠标事件

• click：鼠标点击事件
• mouseenter：鼠标进入事件
• mouseleave：鼠标离开事件

点我

2. 常用表单事件

• focus: 表单聚焦触发
• blur：表单失去焦点触发
• input：表单值改变触发
  

3. 常用键盘事件

• keydown：键盘按下触发
• keyup：键盘弹起触发

---

事件对象

事件对象是什么

• 是一个对象，这个对象里面有触发事件时存储的相关信息
• 例如鼠标点击事件，事件对象中存储了鼠标点击位置的相关信息…
• 可以判断按下那个键和鼠标点击那个位置

获取事件对象

• 处理函数的第一个参数就是事件对象
• 一般命名为e，event

点我

常用事件属性

• type：获取当前事件类型
• clientX/Y：获取光标距游览器可见窗口左上角位置
• offsetX/Y：获取光标相对于DOM元素距离左上角位置
• key：获取用户按下键盘的值

点我

---

环境对象(this)

什么是环境对象

• 指的是函数内部的对象this，代表当前函数运行所处的环境

this指向

• 普通函数中this指向window
• 事件中this指向dom元素
• 箭头函数没有this指向
• 一般this执行它的调用者

---

回调函数

什么是回调函数

• 如果将函数a作为参数传递给函数b，则函数a就是 回调函数
• 回调函数执行时机一般为函数b执行完毕执行
• 回调函数可以是具名函数也可以是匿名函数

常见场景

// 第二个参数为回调函数
input.addEventListener("keydown",function(e){
    console.log(e.key);
})
// 第一个参数为回调函数
setInterval(function(){

},1000)