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称为回调函数

② 使用匿名函数作为回调函数比较常见