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]

二十四、特殊字符


  - [] 字符集合
    - - 代表编码表上面一个连续范围
    - () 代表组
    - |  或者
    - [^] 反字符集
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦逼的猿宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值