JS事件、正则、ES6语法（学习整合）

事件（EVENT）

事件就是用户和网页之间的交互（触发事件后交给 函数 处理）

事件的组成

• 触发谁的事件：事件源
• 触发什么事件：事件类型
• 触发以后做什么：事件处理函数

var divObj = document.querySelector('div')

divObj.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数
}

事件种类

鼠标事件：点击（onclick）、移入（onmouseover）、移除（onmouseout）、移动（onmoursemove）

键盘事件：按下（onkeydown）、松开（onkeyup）

表单事件：获取焦点（onfocus）、失去焦点（onblur）、下拉改变（onchange）、表单提交（onsubmit）

页面事件：页面加载（onload）、页面尺寸（onsize）、页面滚动（onscroll
document.body.scrollTop与document.documentElement.scrollTop）

事件（绑定/注册）

种类：

DOM0级事件（用下面语法称之为DOM0事件）

<标签 事件类型=”函数名()”></标签名>
节点对象.事件类型 = function() {}
节点对象.事件类型 = null   // 清空

特色：
1同一个节点同一事件只能设置一次，多次着后者覆盖前者
2无兼容问题

DOM3级事件

DOM3级事件在DOM2级事件的基础上【添加了更多的事件类型】，全部类型如下：
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
等等

事件（流）

简介

• 给多层嵌套的元素，添加相同类型的事件，点击最里面的元素，外层元素相同类型的事件同时出发，这种情况是事件流的表现。
• 给多层嵌套元素，添加相同的事件并且一起执行的效果称之为：事件流
• 特性：点一个都出发了

事件流种类

• 冒泡型（从里向外）

• 捕获型（从外向里）

DOM0级事件都是冒泡型（无法改变）
DOM2级事件IE低版本都是冒泡型（无法改变）
DOM2级事件主浏览器：默认第三个参数是false-冒泡型，true-捕获型

事件（对象）

• 事件对象：就是用来存储事件相关的信息

• 事件对象存储信息有：

  • 事件的类别，如：click，keydown等等

  • 点击事件的位置

  • 点击的哪一个键

  • 等等

• 用于阻止事件流，用于阻止浏览器默认动作（表单提交、a标签跳转等）

事件（委托）

就是利用事件流特性，将事件委托给父元素注册 什么是事件委托：将子的事件委托到父节点上

哪些场景需要委托：增加新节点，并且新节点也需要原节点相同的事件

事件委托的好处：减少代码冗余，便于维护

在实际工作中，是多个元素彼此嵌套设置相同的事件多，还是多个元素彼此嵌套给一个元素设置见多（后面 我们学习事件流的目的
让你小心 点击一个大家都触发 & 解决上面问题减少代码冗余）

JS（正则）

1、什么是正则表达式

• 正则表达式（Regular Expression 简称：RegExp）

• 又成规则表达式，描述了匹配字符串的规则

• 由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的

• 我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格

2、正则表达式的作用

• 对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证

• 内容替换、获取

• 网络爬虫（一个网站到另一个网站的页面上去获取对方的相关信息）

  最最最常用：表单验证

创建正则对象

1、隐式创建

语法：var regexp = /正则表达式/可选修饰符; （脚下留心：不用引号）

2、直接实例化

语法：var regexp = new RegExp（“正则表达式”，可选修饰符）;

留心：参数需要引号，并且不能写斜杠

3、参数说明

【必选】正则表达式：由一些普通字符和元字符组成（就是具有特殊含义的字符）【正则表达式区分大小写】

【可选】修饰符：可以使i、g分别表示多行匹配，i不区分大小写，g全局匹配

RegExp对象方法

• 语法：正则.test（字符串）

• 返回：判断正则表达式是否匹配成功 成功-true，失败-false

• 语法：正则.exec（字符串）

• 返回：匹配符合正则表达式条件的数据 成功-数组，失败-null

正则表达式里面的符号

- `.` ： 匹配非换行的任意字符
- `\` ： 转译符号，把有意义的 **符号** 转换成没有意义的 **字符**，把没有意义的 **字符** 转换成有意义的 **符号**
- `\s` ： 匹配空白字符（空格/制表符/...）
- `\S` ： 匹配非空白字符
- `\d` ： 匹配数字
- `\D` ： 匹配非数字
- `\w` ： 匹配数字字母下划线
- `\W` ： 匹配非数字字母下划线

限定符

- `*` ： 前一个内容重复至少 0 次，也就是可以出现 **0 ～ 正无穷** 次
- `+` ： 前一个内容重复至少 1 次，也就是可以出现 **1 ～ 正无穷** 次
- `?` ： 前一个内容重复 0 或者 1 次，也就是可以出现 **0 ～ 1** 次
- `{n}` ： 前一个内容重复 n 次，也就是必须出现 **n** 次
- `{n,}` ： 前一个内容至少出现 n 次，也就是出现 **n ～ 正无穷** 次
- `{n,m}` ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 **n ～ m** 次

边界符

- `^` ： 表示开头
- `$` ： 表示结尾

特殊符号

- `()` ： 限定一组元素
- `[]` ： 字符集合，表示写在 `[]` 里面的任意一个都行
- `[^]` ： 反字符集合，表示写在 `[^]` 里面之外的任意一个都行
- `-` ： 范围，比如 `a-z` 表示从字母 a 到字母 z 都可以
- `|` ： 或，正则里面的或 `a|b` 表示字母 a 或者 b 都可以

标示/修饰符符

- `i` ： 表示忽略大小写
  - 这个 i 是写在正则的最后面的
  - `/\w/i`
  - 就是在正则匹配的时候不去区分大小写
- `g` ： 表示全局匹配
  - 这个 g 是写在正则的最后面的
  - `/\w/g`
  - 就是全局匹配字母数字下划线

ES6

声明变量***

var 变量名 = 变量值; //声明变量，函数作用域

let 变量名 = 变量值; //声明变量，块级作用域（ps. 作用域内不能重复定义）

const 变量名 = 变量值; //声明常量 (ps. 不能修改)

解构赋值*

let [变量1=默认值1，…，变量n=默认值n] = [值1，…，值n];

let {键1:变量1=默认值1，…，键n:变量n=默认值n} = {键1:值1，…，键n:值n};

字符串的扩展***

模板字符串

var html = **`**

代码...

${变量名}

`

函数的扩展***

1、this数据场景

A普通函数调用 this => window对象 function 函数名() 函数名()

B对象函数调用 this => 对象 var obj = {属性名:function(){}}

C事件处理函数调用 this => 事件源对象（你操作了谁）

D定时器调用 this => window对象

E箭头函数中调用 this => 父function中的this 父没有就是window对象

2、箭头函数（重点）

【ES5】function (参数1,...,参数n) {}
【ES6】(参数1,...,参数n) => {}

注意：只有一个形参小括号可省略，函数体只有一行代码大括号可省略

数组的扩展

成员查找find()、findIndex()

查找成员语法：

数组.find(function(成员) {
	return 条件  //条件成立则返回当前成员，不成立继续走、最终返回undefined
})

查找成员下标语法：

数组.findIndex(function(成员) {
	return 条件  //条件成立则返回当前成员，不成立继续走、最终返回undefined
})

循环（for…of…）

• 起初遍历数组 for、while、do…while
• 在ES5中遍历数组：forEach（仅支持数组） for…in（推荐遍历对象）
• 在ES6中遍历数组：for…of （更强，可以遍历数组、字符串、映射、集合等数据结构）

// 最初：while、do…while、for （用来循环数组）

// 后来：forEach(仅支持数组)、forin（既数组下标字符串、又对象 推荐）

// 接着：forof（数组下标没有、新的数据结构set/map 推荐）