鼠标事件 键盘事件 表单事件 等事件总结

鼠标事件

事件类型

  • click:用户单击主鼠标按钮(一般是左键)或者按下在聚焦时按下回车键时触发
  • dblclick:用户双击主鼠标按键触发(频率取决于系统配置)
  • mousedown:用户按下鼠标任意按键时触发
  • mouseup:用户抬起鼠标任意按键时触发
  • mousemove:鼠标在元素上移动时触发
  • mouseover:鼠标进入元素时触发
  • mouseout:鼠标离开元素时触发
  • mouseenter:鼠标进入元素时触发,该事件不会冒泡
  • mouseleave:鼠标离开元素时触发,该事件不会冒泡

区别:

  • over和out,不考虑子元素,从父元素移动到子元素,对于父元素而言,仍然算作离开
  • enter和leave,考虑子元素,子元素仍然是父元素的一部分
  • mouseenter和mouseleave不会冒泡

事件对象

所有的鼠标事件,事件处理程序中的事件对象,都为 MouseEvent

  • altKey:触发事件时,是否按下了键盘的alt键
  • ctrlKey:触发事件时,是否按下了键盘的ctrl键
  • shiftKey:触发事件时,是否按下了键盘的shift键
  • button:触发事件时,鼠标按键类型
    • 0:左键
    • 1:中键
    • 2:右键

位置:

  • page:pageX、pageY,当前鼠标距离页面的横纵坐标
  • client: clientX、clientY,鼠标相对于视口的坐标
  • offset:offsetX、offsetY,鼠标相对于事件源的内边距的坐标
  • screen: screenX、screenY,鼠标相对于屏幕
  • x、y,等同于clientX、clientY
  • movement:movementX、movementY,只在鼠标移动事件中有效,相对于上一次鼠标位置,偏移的距离

键盘事件

事件类型

  • keydown:按下键盘上任意键触发,如果按住不放,会重复触发此事件
  • keypress:按下键盘上一个字符键时触发
  • keyup:抬起键盘上任意键触发

keydown、keypress 如果阻止了事件默认行为,文本不会显示。

事件对象

KeyboardEvent

  • code:得到按键字符串,适配键盘布局。
  • key:得到按键字符串,不适配键盘布局。能得到打印字符。
  • keyCode、which:得到键盘编码

其他事件

表单事件

  • focus:元素聚焦的时候触发(能与用户发生交互的元素,都可以聚焦),该事件不会冒泡
  • blur:元素失去焦点时触发,该事件不会冒泡。
  • submit:提交表单事件,仅在form元素有效。
  • change:文本改变事件
  • input: 文本改变事件,即时触发

其他事件

window全局对象

  • load、DOMContentLoaded、readystatechange

window的load:页面中所有资源全部加载完毕的事件
图片的load:图片资源加载完毕的事件

浏览器渲染页面的过程:

  1. 得到页面源代码
  2. 创建document节点
  3. 从上到下,将元素依次添加到dom树中,每添加一个元素,进行预渲染
  4. 按照结构,依次渲染子节点

document的DOMContentLoaded: dom树构建完成后发生

readystate: loading、interactive、complete

interactive:触发DOMContentLoaded事件

complete:触发window的load事件

原文地址:https://www.cnblogs.com/panghu123/p/11706507.html