事件分类及正则表达式

一、事件分类

1、页面事件

（1）load：页面加载事件。用于body内所有标签都加载完成后才触发

（2）unload：用于页面关闭时触发，经常用于清除变量，避免内存的泄露

2、焦点事件：多用于表单验证

（1）focus：当获得焦点时触发

（2）blur：失去焦点时触发

3、鼠标事件

（1）click：鼠标单击

（2）dblclick：鼠标双击

（3）mouseover：鼠标进入

（4）mouseout：鼠标离开

（5）change：当内容发生改变时触发--input、select

（6）mousedown：当按下任意鼠标按键时触发

（7）mouseup：当释放任意鼠标按键时触发

（8）mousemove：在元素内当鼠标移动时持续触发

4、在鼠标事件中，鼠标的位置信息的获取

（1）clientX：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）

（2）clientY：鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）

（3）pageX：鼠标指针位于文档的水平坐标（X轴坐标）

（4）pageY：鼠标指针位于文档的垂直坐标（Y轴坐标）

（5）screenX：鼠标指针位于屏幕的水平坐标（X轴坐标）

（6）screenY：鼠标指针位于屏幕的垂直坐标（Y轴坐标）

强调：事件对象的兼容性处理

（一）早期IE浏览器版本获取事件对象的方法：window.event

标准浏览器获取事件对象的方法：event

DOM对象.addEventListener('事件名称'，function(e){

let my_event = e || window.event

})

(二)早期IE浏览器对事件对象的pageX和pageY的兼容性处理：

var pageX = event.pageX || event.clientX + document.documentElement.scroIILeft

var pageY = event.pageY || event.clientY + document.documentElement.scroIITop

鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条减去文本长度

5、键盘事件：用户在使用键盘时触发

（1）keypress：键盘上按键按下时触发，不包含非字符按键。保存的时按键的ASCII码值

（2）keydown：键盘上按键按下时触发

（3）keyup：键盘按键弹起时触发

keydown和keyup保存的是按键的虚拟键码

6、表单事件：操作表单时触发

（1）submit：当表单提交时触发

（2）reset：当表单重置时触发

二、正则表达式

1、什么是正则表达式

（1）是描述字符串组成结构的语法规则

（2）是用于匹配字符串中字符组合的模式

（3）是一个对象

2、特点

（1）非常灵活

（2）逻辑性非常强

（3）以非常简单的方式对字符串进行复杂的控制

3、创建正则表达式

（1）使用字面量

var 变量名 = /表达式/

（2）使用RegExp构造函数

var 变量名 = RegExp(/表达式/)

或

var 变量名 = new RegExp(/表达式/)

4、正则表达式的使用

（1）test()方法：返回boolean值。true表示符合正则规则，false表示不符合正则规则

正则对象.test(被验证的字符串)

（2）模式修饰符：/表达式/[switch]

switch：是模式修饰字符，是可选的，通过它可以对正则进行进一步的设置

g：表示全局匹配

i：忽略大小写

（3）边界符：

^：表示匹配行首的文本（表示以谁开头）

$：表示匹配行尾的文本（表示以谁结尾）

（4）预定义字符：

. ：除了’\n’之外的任意单个字符

\d ：表示0~9之间的任意数字。等价于[0-9]

\D： 表示匹配0~9以外的字符。等价于[ ^0-9]

\w：表示匹配任意字母、数字和下划线。等价于[a-zA-Z0-9]

\W：除所有字母、数字和下划线以外的字符，相当于[ ^a-zA-Z0-9 ]

\b：单词分界符

\s：匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]

match(正则表达式)方法：是String对象的方法，用来截取符合正则表达式规则的子串，返回值是数组

强调：转义字符” \ “，若要输出反斜杠，要使用连续两个’ \ ‘

（5）字符范围示例

[cat]：匹配字符集合中的任意一个字符c、a、t

[ ^cat ]：匹配除c、a、t以外的字符

[A-Z]：匹配字母A~Z范围内的字符

[\u4e00-\u9fa5]：匹配任意一个中文字符

字符组合：如果允许用户输入英文字母（不区分大小写）、数字、短横线-、下划线_的正则情况。

var rg = /^[a-zA-Z0-9_-]$/;

三、正则表达式的量词符和括号符

1、量词符

（1）？：匹配？之前的字符零次或一次。例如：hi?t —> ht hit

注意：exec(字符串)：是正则表达式对象的方法。返回值类型是数组。

（2）+：匹配+前面的字符一次或多次。例如：bre+ad ——> bre….ad

（3）* ：匹配* 前面的字符零次或多次。例如：bre*ad —->brad 、bre…ad

（4）{n}：匹配{}前面的字符n次。例如：hi{3}t —-> hiiit

（5）{n,}：匹配{}前面的字符最少n次。例如：hi{3,}t —-> hiii…..t

（6）{n,m}：匹配{}前面的字符n~m次

2、括号字符：改变限定符的范围

（1）改变限定符范围之前：catch|er

匹配结果：catch、er

（2）改变限定符范围之后：cat(ch|er)

匹配结果：catch、cater

（3）分组：

分组前：abc{2} —->表示{}前面的c要出现两次

分组后：a(bc){2} —->表示{}前面的bc要出现两次

四、正则表达式的捕获与非捕获

1、捕获：使用小括号可以进行分组，当小括号后面有量词符时，就表示对整个组进行操作。

2、进行字符串的替换：replace结合正则表达式实现

五、贪婪匹配与懒惰匹配

1、贪婪匹配：表示匹配尽可能多的字符。是正则表达式的默认匹配方式

2、懒惰匹配：表示匹配尽可能少的字符。通过‘？’来实现

六、正则表达式的优先级（优先匹配）

一级：\ 转义字符

二级：()、[]

三级：*、+、?、{n}、{n,}、{n,m}

四级：^、$、\任何元字符、任何字符

示例：

身份证的正则： /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))((0-2)|10|20|30|31)\d{3}[0-9Xx]$