• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

超级飞燕

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

JS事件

JS事件 JS 事件大全 事件绑定语法 鼠标事件 键盘事件 浏览器事件 表单事件 拖拽事件 触摸事件 其他事件

JS事件

绑定事件语法:元素.onxxx=function(){}
xxx表示事件名,当xxx事件触发时执行function函数

鼠标事件

click
    鼠标左键单击
dblclick
    鼠标左键双击
contextmenu
    鼠标右键单击
mousewheel
    鼠标滚轮滚动事件
mousedown
    鼠标按下事件(不光是左键,鼠标上的其他键也可以触发)
mouseup
    鼠标抬起事件
mousemove
    鼠标移动事件
mouseover
    鼠标移入事件
mouseout
    鼠标移出事件
mouseenter
    鼠标移入事件
mouseleave
    鼠标移出事件

键盘事件

keydown
    键盘按下事件
keyup
    键盘抬起事件
keypress
    键盘按下事件--必须要准确嵌入到文本框里面内容才能触发出现在文本框里的内容要和你按下的键一致
    不是所有元素都能触发,表单元素/document/window 可以触发

浏览器事件

load
    页面加载完毕事件
resize
    浏览器窗口尺寸改变事件
scroll
    滚动条滚动事件
offline
    网络断开事件
online
    网络恢复事件
hashchange
    当哈希值改变的时候触发

表单事件

change
    表单内容改变
    当表单失焦和聚焦的时候内容不一样的时候触发
input
    表单输入事件
focus
    表单聚焦事件
blur
    表单失焦事件
submit
    表单提交事件
reset
    表单重置事件
    表单事件是绑定给表单元素 和 form 标签的

拖拽事件

img标签天生允许拖拽
一个普通元素想拖拽,需要添加一个属性 draggable = "true"
拖拽元素
    dragstart
        拖拽开始事件
    drag
        拖拽移动事件
    dragend
        拖拽结束事件
目标元素
    dragenter
        拖拽进入目标元素的事件(光标进入目标元素)
    dragleave
        拖拽离开目标元素
    dragover
        拖拽元素在目标元素里移动
    drop
        拖拽元素在目标元素内放手--需要阻止默认事件

触摸事件

touchstart
    触摸开始
touchmove
    触摸移动
touchend
    触摸结束

其他事件

transitionend
    过渡结束事件
selectstart
    开始框选文档时触发
visibilitychange
    窗口隐藏或显示时触发,可视状态改变(只绑定给document)
    不是所有元素都能触发,表单元素/document/window 可以触发

posted on 2022-04-01 13:29  超级飞燕  阅读(41)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3