JavaScript基础——事件、高阶函数

1、事件

1.1 事件以及事件监听器

事件就是在编程时系统内发送的动作或者发生的事情，比如用户在网页上单击一个按钮

什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件

语法：元素.addEventListener('事件'，要执行的函数)

事件三要素：

• 事件源：某个dom元素被触发了，要获取这个dom元素
• 事件：用什么方式触发，比如鼠标单击 click，鼠标经过 mouseover
• 事件触发后调用的函数：要做什么事

1.2 事件类型

1.3 事件监听的版本

DOM L0
事件源.on事件 = function(){}

DOM L2
事件源.addEventListener(事件, 事件处理函数)

发展史

1. DOM L0：是DOM发展的第一个版本
2. DOM L1：DOM级别1于1998年10月1日成为W3C推荐标准
3. DOM L2：使用 addEventListener 注册事件
4. DOM L3：DOM3事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了新的事件类型

1.4 两种注册事件的区别

传统 on 注册（L0）

• 同一个对象，注册多个相同事件时，后面注册的事件会覆盖前面注册的
• 直接使用 null 覆盖就可以实现事件的解绑
• 都是冒泡阶段执行的

事件监听注册（L2）

• 语法：.addEventListener(事件类型,事件处理函数,是否使用捕获)
• 后面注册的事件不会覆盖前面注册的事件（同一个事件）
• 可以通过第三个参数去确定实在冒泡或捕获阶段执行
• 必须使用.removeEventListener(事件类型,事件处理函数,是否使用捕获)解绑事件
• 匿名函数被注册的事件无法被解绑

2、高阶函数

高阶函数可以被理解为函数的高级应用，JS 中函数可以被当成值来对待，基于这个特性实现函数的高级应用

2.1 函数表达式

高阶函数的函数表达式和普通函数在使用上并无明显的区别：
函数表达式必须要先声明再调用

2.2 回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

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

3、环境对象

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

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