JS学习笔记(day09)

Day09（事件）

一、事件的含义及三要素

• 含义： 由用户行为触发的代码

• 事件组成三要素

1. 事件源 给哪个元素绑定事件

1. 事件类型 什么样的用户行为 点击..

1. 事件处理函数 要处理的事件

二、绑定事件的方式

    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

九、节流

• 用户一直触发这个事件 每触发一次事件就会执行一次 这样就会导致事件执行的频率过高，可以控制事件执行的次数 让事件在某一个时间区间里面 即使用户多次触发这个事件 事件也只会执行一次

• 实现

1. 每一次触发这个事件 不是立即执行 会使用延迟定时器让事件延迟执行

1. 定义一个状态 首先这个状态isCanMove为true代表这个事件可以执行

1. 每一次在执行这个事件的时候都会判断这个isCanMove，如果isCanMove为true就执行后面的事件代码 如果isCanMove为false 后面的事件代码就不执行了

1. 每一次执行这个事件都会将这个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 获取焦点

十六、事件传播

• 含义： 多个嵌套的元素绑定同类型的事件事件执行的先后顺序

• 分类：

1. 事件执行的方向由内向外 这种机制被称为冒泡机制

1. 事假执行的方向由外向内 这种机制被称为捕获机制

• 目标元素

• event.target

• 事件委托

• 某一个元素是动态生成 无法直接绑定事件

• 实现

1. 给他的父元素（页面 进入的时候就存在）绑定同类型事件

1. 通过event.target来判断是不是点击到子元素身上

• 阻止冒泡

• 只希望触发子元素的事件 不希望父元素的事件也触发

• 子元素的事件处理函数里面 使用 event.stopPropagation()

十七、阻止默认事件

    + 含义： html标签自带行为
    - 表单按钮自带提交行为
    - a链接自带跳转

十八、event对象的作用

1. 获取坐标

1. 获取键盘码 组合键

1. 获取滚轮滚动方向

1. 获取目标元素

1. 阻止默认事件

1. 阻止冒泡

十九、事件绑定方式（改进版）

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]

二十四、特殊字符

  - [] 字符集合
    - - 代表编码表上面一个连续范围
    - () 代表组
    - |  或者
    - [^] 反字符集