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

  • 相关阅读:
    🏆【Java技术专区】「编译器专题」彻底你明白什么是JIT编译器(Just In Time编译器)
    Sql server日期函数用法
    Oracle 11g密码过期问题及解决方案
    该驱动程序不支持 SQL Server 8 版
    maven添加sqlserver的jdbc驱动包
    com.microsoft.sqlserver.jdbc.SQLServerException: 对象名 ‘DUAL‘ 无效 | Druid双数据源MySQL+SQL server
    用Java连接SQL Server2000数据库的两种方法与jDTS
    无法远程连接Sql Server 2000解决方案
    为 SQL Server 2000 数据库添加用户名和密码
    Oracle的number数据类型
  • 原文地址:https://www.cnblogs.com/panghu123/p/11706507.html
Copyright © 2011-2022 走看看