zoukankan      html  css  js  c++  java
  • 鼠标事件 键盘事件 表单事件 等事件总结

    鼠标事件

    事件类型

    • 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事件

  • 相关阅读:
    mysql 历史版本下载
    mysql 5.7 版本 You must reset your password using ALTER USER statement before executing this statement报错处理
    5.7 zip 版本的安装 以及遇到的坑
    mysql 5.6zip版本的卸载与5.7 zip 版本的安装
    mysql数据库的备份与还原
    本地Navicat连接docker里的mysql
    docker修改数据库密码
    docker 在push镜像到本地registry出现的500 Internal Server Error
    linux 没有界面内容显示不全解决办法
    json与map互相转换
  • 原文地址:https://www.cnblogs.com/panghu123/p/11706507.html
Copyright © 2011-2022 走看看