事件监听

事件监听三要素

目标：给 DOM 元素添加事件监听

事件是编程世界发生的动作或者事情

事件监听是让程序检测事件的发生，调用函数响应事件

语法：元素对象.addEventListener('事件类型', 要执行的函数)

1
2
3
4
5
6
7

// 获取元素
const btn = document.querySelector('.btn')
// 绑定事件
// 事件监听三要素：事件源、事件类型、响应函数
btn.addEventListener('click', function () {
  console.log('我被点击了')
})

事件监听版本

事件监听有两个不同的版本：

• L0 版本网页元素.on事件类型
• L2 版本网页元素.addEventListener

两个版本的区别：

• L0 版本相同类型事件会发生覆盖，L2 版本不会
• L0 版本只有事件冒泡，没有事件捕获特性，L2 版本都有

事件类型

事件类型主要有四大类：

• 鼠标
  • 鼠标点击(click)
  • 鼠标经过(mouseenter)
  • 鼠标离开(mouseleave)
• input 表单
  • focus(获得焦点)
  • blur(失去焦点)
• 键盘
  • keydown(键盘按下)
  • keyup(键盘抬起)
• 表单输入
  • input(输入文本)

事件对象 event

事件对象是什么

是一个对象，里面有事件触发时的相关信息

是addEventListener函数回调函数的第一个参数

事件对象常见属性

环境对象 this

目标：能够分析判断函数运行在不同环境中 this 所指代的对象

环境对象是什么

指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

this 指向：

• 函数的调用方式不同，this 指代的对象也不同
• 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
• 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

回调函数

目标：能够说出什么是回调函数

定义：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

注意事项：

• 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
• 回调函数本质还是函数，只不过把它当成参数使用
• 使用匿名函数做为回调函数比较常见