web API-day02-事件, 高阶函数, 环境对象, 编程思想

一. 事件

1. 什么是事件

   事件是在编程时系统内发生的动作或者发生的事情

   比如用户在网页上单击一个按钮

2. 什么是事件监听？

   就是让浏览器检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件

   语法:

3. 事件监听三要素

   事件源： 哪个dom元素被事件触发了

   事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseenter 等

   事件调用的函数： 要做什么事

1. 事件监听

1. 事件类型要加引号

2. 函数是点击之后再去执行，每次点击都会执行一次

   举例说明:

小结:
1. 什么是事件？ 
  Ø 事件是在编程时系统内发生的动作或者发生的事情 
  Ø 比如点击按钮 click 
2. 什么是事件监听？ 
  Ø 检测是否有事件产生，一旦有事件触发，就立即调用一个函 数做出响应，也称为 注册事件 
3. 事件监听三要素是什么？ 
  Ø 事件源 (谁被触发了) 
  Ø 事件 (用什么方式触发，点击还是鼠标经过等) 
  Ø 事件处理程序 （要做什么事情）
    元素.addEventListener('事件', 要执行的函数)

2. 拓展阅读-事件监听版本

DOM L0

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

DOM L2

事件源.addEventListener(事件， 事件处理函数)

发展史：

DOM L0 ：是 DOM 的发展的第一个版本； L：level

DOM L1：DOM级别1 成为W3C推荐标准

DOM L2：使用addEventListener注册事件

DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

3. 事件类型

1. 鼠标事件（鼠标触发）
   click 鼠标点击
   mouseenter 鼠标经过
   mouseleave 鼠标离开

2. 焦点事件（表单获得光标）
   focus 获得焦点
   blur 失去焦点

3. 键盘事件（键盘触发）
   Keydown 键盘按下触发
   Keyup 键盘抬起触发

4. 文本事件（表单输入触发）
   input 用户输入事件

二. 高阶函数

JavaScript 中函数可以被当成【值】来对待

【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

1. 函数表达式

2. 回调函数

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

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

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

常见的使用场景：

小结:
1. 函数表达式 
Ø 函数也是【数据】 
Ø 把函数赋值给变量 
2. 回调函数 
Ø 把函数当做另外一个函数的参数传递，这个函数就叫回调函数

三. 环境对象

目标：能够说出事件处理函数中 this 的指向

函数内部，有一个特殊的变量 this ，称之为 环境对象

事件处理函数中 this 指向谁呢？ => 事件源

四. 编程思想

排他思想
当前元素为A状态,其他元素为B状态

使用：

1. 干掉所有人

2. 复活他自己