Day09(事件)
一、事件的含义及三要素
-
含义: 由用户行为触发的代码
-
事件组成三要素
-
事件源 给哪个元素绑定事件
-
事件类型 什么样的用户行为 点击..
-
事件处理函数 要处理的事件
二、绑定事件的方式
1. html+js的方式
- 给哪个元素绑定事件 就在哪个元素的身上写上on+事件类型="事件处理函数()"
- 在js里面只要定义这个事件处理函数就可以了
2. 纯js的方式绑定
- 先获取事件源
- 事件源.on+事件类型 = 事件处理函数
三、鼠标事件
- click 单击
- dblclick 双击
- mouseover 移入
- mouseout 移出
- mousemove 移动
- mousedown 按下
- mouseup 抬起
- mousewheel 滚轮滚动
四、事件对象>event对象
+ 含义: 获取一个事件在触发的时候详细信息
+ 获取event对象两种方式
1. 直接在事件处理函数内部写上event
2. 事件处理函数默认第一个形参就是event
- 兼容性的获取
- var evt = event || e
五、获取四组坐标
- event.offsetX event.offsetY 鼠标位置相对于事件源左上角的坐标
- event.clientX event.clientY 鼠标位置相对于浏览器左上角的坐标
- event.pageX event.pageY 鼠标位置相对于页面左上角的坐标
- event.screenX event.screenY 鼠标位置相对于屏幕左上角的坐标
六、获取鼠标滚轮方向
evt.wheelDeltaY
七、滚动事件
- scroll 滚动条位移事件
- mousewheel 鼠标滚轮滚动事件
八、js获取一屏的宽度
- window.innerWidth
- window.innerHeight
九、节流
-
用户一直触发这个事件 每触发一次事件就会执行一次 这样就会导致事件执行的频率过高,可以控制事件执行的次数 让事件在某一个时间区间里面 即使用户多次触发这个事件 事件也只会执行一次
-
实现
-
每一次触发这个事件 不是立即执行 会使用延迟定时器让事件延迟执行
-
定义一个状态 首先这个状态isCanMove为true代表这个事件可以执行
-
每一次在执行这个事件的时候都会判断这个isCanMove,如果isCanMove为true就执行后面的事件代码 如果isCanMove为false 后面的事件代码就不执行了
-
每一次执行这个事件都会将这个isCanMove状态标记为false 等这个事件执行完成之后才将这个状态标记为true
十、键盘事件
+ keydown 按下
+ keyup 抬起
十一、判断用户按下的按键
- event.keyCode 键盘码
- enter 13
- 空格 32
十二、判断组合键
- event.ctrlKey
- event.altKey
- event.shiftKey
十三、浏览器事件(load、resize、scroll)
+ load 加载
- 有一些js操作需要等待网页加载完成之后才能执行
- 注意一个html页面只能有一个onload
+ resize 尺寸变化
- 有一些操作需要根据页面尺寸变化而执行
+ scroll 滚动条位移
- 获取滚动条的位移高度
+ document.body.scrollTop
+ document.documentElement.scrollTop
- 设置滚动条的位移高度
十四、阻止默认事件
+ 默认事件: 某些html标签自带的功能
+ event.preventDefault()
十五、表单事件(submit、input、change、blur、focus)
+ submit
- 给表单绑定 在表单提交数据给后端的前一刻触发
- 表单验证
+ 给表单绑定submit事件
+ 在submit里面阻止表单的默认事件 `event.preventDefault()`
+ 进行校验
- 不符合规则 给用户提示
- 符合规则 手动提交表单 `表单元素.submit()`
+ input
- 给输入框绑定 只要用户在输入框里面填写内容就会触发
+ change
- 值变化
+ blur 失去焦点
+ focus 获取焦点
十六、事件传播
-
含义: 多个嵌套的元素绑定同类型的事件事件执行的先后顺序
-
分类:
-
事件执行的方向由内向外 这种机制被称为冒泡机制
-
事假执行的方向由外向内 这种机制被称为捕获机制
-
目标元素
-
event.target
-
事件委托
-
某一个元素是动态生成 无法直接绑定事件
-
实现
-
给他的父元素(页面 进入的时候就存在)绑定同类型事件
-
通过event.target来判断是不是点击到子元素身上
-
阻止冒泡
-
只希望触发子元素的事件 不希望父元素的事件也触发
-
子元素的事件处理函数里面 使用 event.stopPropagation()
十七、阻止默认事件
+ 含义: html标签自带行为
- 表单按钮自带提交行为
- a链接自带跳转
十八、event对象的作用
-
获取坐标
-
获取键盘码 组合键
-
获取滚轮滚动方向
-
获取目标元素
-
阻止默认事件
-
阻止冒泡
十九、事件绑定方式(改进版)
1. html+js
2. 纯js方式
- 元素.on+事件类型 = 事件处理函数
3. 事件监听
- 元素.addEventListener(事件类型, 事件处理函数, 布尔值)
+ 事件监听和on绑定区别
1. 事件监听同类型事件可以绑定多个事件处理函数
2. 两种事件绑定取消事件的方式不一样
3. 事件监听可以支持两种事件执行机制
二十、正则表达式 RegExp
+ 含义: 规则表达式,主要是用于验证字符串的规则
+ 使用流程
1. 创建正则表达式(定义规则)
- 字面量
+ var reg = /符号/
- 内置构造函数
+ var reg = new RegExp('符号')
2. 利用正则表达式去校验字符串
- 正则表达式.test(字符串)
二十一、元字符
- 代表某一类的字符
- \d 代表数字
- \w 代表数字 字母 下划线
- \s 代表空白字符 空格 换行 制表符
- \D 字符串里面至少有一个非数字
- \W
- \S
- . 代表非换行任意字符
- \ 转义
+ 把没有意义变成有意义 d \d
+ 把有意义变成自身 . \.
二十二、边界符
- 限制正则表达式边界
- ^ 代表以xx开头
- $ 代表以xx结尾
二十三、限定符
- 限制某一个字符出现次数
- * [0,正无穷]
- + [1, 正无穷]
- ? [0,1]
- {m} m次
- {m,} 至少m次
- {m,n} [m,n]
二十四、特殊字符
- [] 字符集合
- - 代表编码表上面一个连续范围
- () 代表组
- | 或者
- [^] 反字符集