事件分类及正则表达式

一、事件分类

1、页面事件

​ (1)load:页面加载事件。用于body内所有标签都加载完成后才触发

​ (2)unload:用于页面关闭时触发,经常用于清除变量,避免内存的泄露

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

​ (1)focus:当获得焦点时触发

​ (2)blur:失去焦点时触发

课堂练习:表单验证(验证用户名和密码的合法性)

 

3、鼠标事件

​ (1)click:鼠标单击

​ (2)dblclick:鼠标双击

​ (3)mouseover:鼠标进入

​ (4)mouseout:鼠标离开

​ (5)change:当内容发生改变时触发—- input、select

示例:通过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.scrollLeft;
​ var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

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

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_-]$/;

​ (6)量词符

​ {m,n}:表示{}之前的字符可以出现m~n次

​ {n}:表示{}之前的字符可以出现n次课堂练习:验证西安的座机号码,定义正则表达式测试用户输入的座机号是否正确

 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值