WebAPIs 第二天
DOM事件基础
- 事件监听
- 事件类型
- 事件对象
一.事件监听
① 概念：就是让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也成为绑定事件或者注册事件
② 语法：元素对象.addEventListener('事件类型'， 要执行的函数)
③ 事件监听三要素：
（1）事件源：哪个DOM元素被事件触发了，要获取dom元素
（2）事件类型：用什么方式触发，比如鼠标单击click, 鼠标经过 mouseover等
（3）事件调用的函数：要做什么事
④ 注意：
- 事件类型要加引号
- 函数是触发一次就执行一次
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
alert('你好呀')
})⑤ 事件监听版本（拓展）
-
DOM L0
事件源.on事件 = function(){}
-
DOM L2
事件源.addEventListenner(事件，事件处理函数)
- 区别
on 方式会被覆盖，addEventListenner 方式可绑定多次，拥有事件更多特性，推荐使用
二.事件类型
① 鼠标事件：鼠标触发
- click 鼠标点击
- mouseenter 鼠标经过
- mouseleave 鼠标离开
const div = document.querySelector('div')
// 鼠标经过
div.addEventListener('mouseenter', function () {
console.log('hello')
})
// 鼠标离开
div.addEventListener('mouseleave', function () {
console.log('走了')
})② 焦点事件：表单获得光标
- focus 获得焦点
- blur 失去焦点
// 获得焦点和失去焦点
const input = document.querySelector('input')
input.addEventListener('focus', function () {
console.log('获得焦点')
})
input.addEventListener('blur', function () {
console.log('失去焦点')
})③ 键盘事件：键盘触发
- keydown 键盘按下触发
- keyup 键盘抬起触发
const input = document.querySelector('input')
input.addEventListener('keydown', function () {
console.log('键盘按下')
})
input.addEventListener('keyup', function () {
console.log('键盘弹起')
})④ 文本事件：表单输入触发
- input 用户输入事件
const input = document.querySelector('input')
input.addEventListener('input', function () {
console.log(input.value)
})三.事件对象
1.获取事件对象
2.事件对象常用属性
3.1 获取事件对象
① 事件对象概念
- 也是个对象，这个对象有事件触发时的相关信息
② 使用场景
- 可以判断用户按下哪个键或者点击了哪个元素
③ 如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event，ev， e
④ 语法
元素.addEventListener('click', function(e) {
})3.2 事件对象属性
- type 获取当前的事件类型
- clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY 获取光标相对于DOM元素左上角的位置
- key 用户按下的键盘键的值（不推荐）
四.环境对象
- 环境对象：指的是函数内部特殊的变量this,代表当前函数运行时所处的环境
- 作用：弄清楚this的指向，可以使代码更加简洁
- 函数的调用方式不同，this指代的对象也不同
- 【粗略规则】谁调用this就指向谁
五.回调函数
① 概念：如果将函数A作为参数传递给函数B时，将函数A称为回调函数
② 使用匿名函数作为回调函数比较常见