十六、其他事件&正则表达式

1. 阻止事件冒泡

默认情况下，触发子元素的事件时，会同时触发父元素相同的事件，这就叫做事件冒泡

e.stopPropagation()=> 阻止事件冒泡 e.preventDefault()=>取消默认行为

阻止事件冒泡

2. 添加事件的几种方式

1.在元素中通过onXXX定义事件，指定一个事件方法

2.先获取元素，再给元素绑定事件

3.通过addEventListener方法，给元素注册事件，传递两个参数：事件名和事件方法

4.通过removeEventListener方法，移除指定的事件方法，传递两个参数：事件名和事件方法

定义事件的三种方式

大家好

3. 页面的加载事件

1.window.onload页面加载事件

页面的加载事件，该事件会在页面中的所有内容都加载完毕后执行

注意：所有内容包括：标签结构，样式文件，图片文件，音频文件，视频文件...，如果网页内容过大，会导致该事件延迟执行

window.onload = function(){

alert('页面加载完成！')

}

2.DOMContentLoaded页面加载事件

只要页面中的DOM结构加载完毕后，就会立即执行

注意：该事件只能采用事件监听的方式添加，没有提供快捷方式

window.addEventListener('DOMContentLoaded',function(){

alert('页面结构加载完毕！')

})

页面加载事件

大家好！我是一个div

4.正则表达式

正则表达式：其实就是一种匹配规则，用于检索字符串

定义正则表达式的两种方式：1.直接定义 2.构造函数定义

// 1.直接定义

let reg1 = /abc/

// 2.构造函数定义

let reg2 = new RegExp('abc')

let str = '欢迎学习abc正则表达式'

// test()方法，用于检查一个字符串中，是否有满足匹配规则的字符串。

console.log(reg1.test(str));

// 其实用字符串自己的includes()方法，也能解决上面的问题

console.log(str.includes('abc'));

1. 通配符

\w表示：字母、数字、下划线

\W 表示：除了字母、数字、下划线以外的字符

\d表示：数字

\D表示：非数字

^ 表示：以^符号后面的第一个字符开头

$表示：以表示：以符号前面的第一个字符结尾

{n}表示：重复n次

{n,m}表示：重复n到m次

[xyz]表示：其中任意一个字符

+ 表示：重复前一项1次或多次等价于 {1,}

* 表示：重复前一项0次或多次等价于 {0,}

?表示：重复前一项0次或1次等价于 {0,1}

. 表示：除了换行符以外的任意一个字符

\. 表示：. \^ 表示：^ \-表示：-

可以用()将多个字符作为一个整体

\w 等价于 [0-9a-zA-Z_]

| 表示：或者

[\u4E00-\u9FA5] 是常用汉字的unicode编码范围

2.正则表达式配合字符串的方法&使用正则表达式验证表单

1.replace()方法

默认情况下，replace()方法，只会替换字符串中匹配的第一段内容

使用正则表达式，添加全局匹配修饰符g，可以替换匹配全部内容

使用正则表达式，添加忽略大小写修饰符i，在匹配内容时会忽略大小写

2.search()方法

可以通过正则表达式查找位置

正则表达式

使用正则表达式验证表单

学号：
密码：
确认密码：
姓名：
性别：	男女
年级:
生日：
邮箱：
电话：
身份证：
地址：

通过表单进行数据的增、删、改、查

高校学生管理系统

学生学号	学生姓名	学生年龄	学生性别	学生生日	学生电话	学生地址	操作

添加学生信息

学生学号:
学生姓名:
学生年龄:
学生性别:	男女
学生生日:
学生电话:
学生地址:
操作:

网页显示为：

2021-12-12