事件

用户1223725238332
171 阅读8分钟

事件概述

事件是指对应的某个操作被触发执行某个内容，这个流程指代事件

时间的相关名词

  • 触发者
  • 监听者
  • 事件名
  • 处理

事件是不能知道它的执行时机的，所以它是被设计为异步的

点击按钮 打印 被点击了

button.onclick=function(){
    console.log('被点击了')
}
触发者(button)
监听者(js引擎)
事件名(click)
处理(函数 打印)
对应的处理函数中的this是指向其触发者

事件声明方式

内嵌在标签内（内联模式）

<button onclick="console.log("内联模式")">点击了

JavaScript书写（脚本模式）

image.png

两者相关区别
  1. 使用内联模式，属性会显示在页面上，需要主动调用函数，里面的处理相当于在全局执行的，对应的函数中的this指向window
  2. 使用脚本模式，赋值的事件是不会显示在页面上（而是进行对象属性存储）对应的脚本模式是使用事件驱动处理函数执行不需要主动调用。里面的this会指向对应的触发的元素（添加属性的对象）
  3. 不管是内联还是脚本都会覆盖之前的相关属性内容（只允许一个事件具备一个处理函数）
事件名及事件分类

事件完整脚本书写 element.on+事件名=处理函数

事件属性的组成 on + 事件名

鼠标事件（大部分以mouse开头）
  • click 点击事件
  • dblclick 双击事件
  • mousedown 鼠标按下事件
  • mouseup 鼠标弹起事件
  • mouseenter 鼠标进入
  • mouseleave 鼠标移出
  • mouseover 鼠标移入
  • mouseout 鼠标移出
  • mousemover 鼠标移动事件
  • oncentextmenu 右键鼠标点击
  • onwheel 鼠标滚轮事件
mouseenter / mouseleave 和 mouseover / mouseout 的区别

mouseenter / mouseleave 触发比较少 进入里面的子元素不会重新触发 mouseover / mouseout 出发比较多 进入里面的子元素 他也会重新触发

image.png 事件执行顺序 鼠标按下> 弹起 > 鼠标单击 > 双击

键盘事件（以key开头）
  • keydown 键盘按下
  • keyup 键盘弹起
  • keypress 字符键按下

image.png

HTML相关事件的事件名 window事件
  • load 加载
  • resize 窗口大小
  • beforeunload 卸载之前
  • cloae 浏览器关闭
  • scroll 滚动栏滚动
  • afterprint print之后调用
  • beforeprint print之前调用
  • error window加载报错的时候调用

image.png

表单的相关事件
  • reset 重置 （form表单）
  • submit 提交（form表单）
  • focus 获取焦点事件
  • blur 失去焦点事件
  • select 内容选择事件
  • change value 值修改事件
  • input 内容输入事件

image.png

事件的处理函数内传递的参数

  • 处理函数也是一个函数所以它也具备arguments这个伪数组，通过arguments这个伪数组我们可以接收到对应的一个event对象。而这个event对象是事件在调用的时候传递给我们的一个对象，我们可以通过arguments[0]来访问这个对象，同时也可以通过形参接收实参的方法来访问。
  • 这个event对象具备兼容问题的所以我们需要写兼容写法。
  • 鼠标触发的对象和键盘触发的对象的类型不一致，意味着他们里面的内容也不一致，但由于他们都是event类型所以他们具备部分一致的属性。（如：bubbles 是否冒泡 ctrlKey 是否按下ctrl shiftKey 是否按下shift altKey 是否按下alt target 当前触发的实际元素 ）

image.png

event

概述

event是一个事件源对象，它存储了事件执行中的相关内容（如鼠标点击的坐标位，键盘按下的键等..）

PointerEvent 鼠标触发对象的重点属性
  • x 在页面的横坐标,y 在页面的纵坐标 （兼容问题）
  • pageX 在页面的横坐标（包含不可视部分的宽度） 、 pageY 在页面的纵坐（包含不可视部分的高度）
  • clientX 在页面的横坐标 、 clientY 在页面的纵坐标（不包含不可视部分的距离）
  • screenX 在屏幕上的横坐标 、screenY 在屏幕上的纵坐标
  • offsetX 偏移自身的横坐标 、offsetY 偏移自身的纵坐标
  • button 按钮
  • type 类型 *
  • bubbles 是否冒泡 *
  • ctrlKey 是否按下ctrl *
  • shiftKey 是否按下shift *
  • altKey 是否按下alt *
  • target 当前触发的实际元素 *
  • currentTarget 当前添加的事件的元素 image.png
keyboardEvent 键盘触发对象的重点属性
  • key 区分大小的键值
  • keyCode 对应的键的ascii码 （只有keypress事件才区分大小写 不然是大写）
  • charCode 对应的字符键的ascii码 （只有keypress事件采用值 不然值为0）
  • code 按下的键的字符串
  • type 类型 *
  • bubbles 是否冒泡 *
  • ctrlKey 是否按下ctrl *
  • shiftKey 是否按下shift *
  • altKey 是否按下alt *
  • target 当前触发的实际元素 * image.png
事件委托（事件代理）

将事件绑定在其父元素上（将事件委托给父元素），利用target来找到实际的目标元素进行相关操作

事件委托的步骤
  • 将事件委托给它的父元素（可以是跨级的父元素）
  • 利用event.target来判断对应的触发元素
  • 利用event.target对应触发元素进行操作 image.png
事件委托的优势
  • 减少了内存占用，提高了效率
  • 动态添加事件（简化了dom节点更新时，相应事件的更新）
事件委托的缺点
  • 没有冒泡机制的事件无法处理
  • 如果嵌套过深的HTML代码，效率和性能比较低

事件的执行阶段

  1. 捕获阶段（从body到目标元素的阶段）
  2. 目标阶段（找到当前的目标元素执行）
  3. 冒泡阶段（从目标元素到body的阶段）
事件的两个触发模式
  1. 冒泡模式（从目标元素执行到最外层的元素）（默认模式）
  2. 捕获模式（从最外层的元素执行到目标元素）（需要指定为捕获模式）
禁止事件冒泡

主要是为了在执行当前的事件时不触发外层相同的事件

  • stopPropagation 属于event的方法 （兼容性会更好）

     e.stopPropagation()

  • cancelBubble 通过cancelBubble赋值为true来取消冒泡（兼容ie低版本）

      e.cancelBubble = true

兼容写法

e.stopPropagation ? e.stopPropagation():e.cancelBubble=true

默认行为

某些事件或者对应的标签在默认的特性，称为默认行为 如：

  • a标签点击会跳转
  • img 会拖动
  • form表单的submit标签点击会提交
  • contextmenu 会出现一个菜单栏
  • 有些时候我们不需要这些行为，那么我们就可以将这些行为进行禁止
禁止默认行为
  • e.preventDefault()
  • returnValue 赋值为false e.returnValue = =false
  • return false (在处理函数内直接返回false)一般放在最后面
兼容写法

e.preventDefaule ? e.preventDefaule():e.returnValue=false

javascript三大家族
offset家族
  • offsetparent 偏移的父元素
  • offsetWidth 当前元素的宽度（包含填充和边框）
  • offsetHeight 当前元素的高度（包含填充和边框）
  • offsetLeft 基于偏移的父元素的左偏移量
  • offsetTop 基于偏移的父元素的上偏移量
client家族
  • clientWidth 当前元素的宽度（包含填充不包含边框）
  • clientHeight 当前元素的高度（包含填充不包含边框）
  • clientLeft 离左边的边框的距离
  • clientTop 离上边的边框的距离
scroll家族
  • scrollWidth 当前元素的宽度（包含填充和滚动栏距离）
  • scrollHeight 当前元素的高度（包含填充和滚动栏距离）
  • scrollLeft 滚动栏距离左面的距离
  • scrollTop 滚动栏距离上面的距离
事件监听（eventListener）

事件监听器，使用了观察者模式（observer）,他是添加事件的一种方式

重点方法

addEventListener 添加事件监听器

image.png removeEventListener 移除事件监听器

image.png 注意：如果里面有一个参数不相等那么就不能移除

dispatchEveent 派发事件（执行事件）

eventListener监听事件 和 属性指定事件的区别
  • eventListener一个事件可以指定多个处理函数，属性会覆盖
  • eventListener可以设置是否捕获 属性指定不能设置
  • eventListener 添加的事件可以被移除 属性指定只能重新赋值为null进行移除
  • eventListener 添加的事件可以任意书写 由dispatchEvent来触发
拖拽的相关事件
  • 按下事件 mousedown
  • 移动事件 mousemove
  • 弹起事件 mouseup
全局拖拽
  • 思路
  1. 给需要拖拽的元素添加按下事件
  2. 记录按下的坐标
  3. 给全局添加移动事件
  4. 记录移动的位置
  5. 定位的位置 =元素移动的位置 -按下的距离
  6. 添加弹起事件
  7. 给全局的移动事件和按下事件赋值为null
局部拖拽
  • 思路 给拖拽的元素添加按下事件 记录按下的坐标 给区间元素添加移动事件 获取离页面的距离 定位位置=移动坐标位-按下的位置-父元素离页面的距离 判断区间 （大于最大的就等于最大的 小于0 就等于0） 设置对应的拖拽元素的位置 添加全局弹起事件 给需要拖拽的元素移动事件和全局弹起事件赋值为null
avatar
文章
阅读
粉丝