首页 > 编程语言 >JavaScript常用事件详解

JavaScript常用事件详解

时间:2024-01-19 21:35:21浏览次数:35  
标签:触发 常用 元素 鼠标 JavaScript 详解 用于 事件 按键

一、用于form(表单)的事件

在网页中经常会遇到一些表单的验证,是通过事件进行处理的,比如用户输入用户名之后,及时显示用户是否被注册

用于form(表单)的事件

事件名 功能

onblur

| 当元素失去焦点时运行
onchange| 当元素值被改变时运行
onfocus| 当元素获取焦点时运行
onselect| 在元素中 文本被选中后触发
onsubmit|

当提交表单时触发

二、用于keyboard(键盘)的事件

键盘事件经常用于网络游戏之中,只需要给网页添加监听事件,当用户按下相应的按键时,就会触发事件处理程序

用于keyboard(键盘)的事件

事件名 功能
onkeydown 当用户按下按键时触发
onkeyup 当用户释放按键时触发
onkeypress 当用户敲击按键时触发

三、用于mouse(鼠标)的事件

鼠标事件在网站中尤其常用,可以利用鼠标事件触发很多特效,最简单的就是单击弹出对话框,还有网页轮播图鼠标移出、移出的动画效果

用于mouse(鼠标)的事件

事件名 功能
onclick 当元素上发生鼠标点击时触发
ondblclick 当元素上发生鼠标双击时触发
onmousedown 当元素上按下鼠标按键时触发
onmouseup 当元素上释放鼠标按键时触发
onmousemove 当元素上进行鼠标移动时触发
onmouseover 当鼠标指针移动到元素上时触发
onmouseout 当鼠标指针移出元素时触发
onmousewheel 当鼠标滚轮被滚动时运行脚本
onscroll 当元素滚动条被滚动时运行脚本

四、用于window对象的事件

比如onload事件在HTML渲染完毕后执行一些操作

window.onload = function(){


}

用于window对象的事件

事件名 功能
onerror 当错误发生时运行时的脚本
onload 页面结束加载之后触发
onunload 一旦页面已下载时触发(或者浏览器窗口已被关闭)
onresize 当浏览器窗口被调整大小时触发

五、手机端触摸屏幕的事件

手机屏触摸事件只会在手机端触发

手机端触摸屏膜的事件

事件名 功能
ontouchstart 当触摸开始的时候触发
ontouchend 当触摸结束的时候触发
ontouchmove 当手指在屏幕上滑动的时候触发

标签:触发,常用,元素,鼠标,JavaScript,详解,用于,事件,按键
From: https://www.cnblogs.com/zhishunet/p/17975678

相关文章

  • 细说JavaScript表达式和运算符号(JavaScript表达式和运算符号详解)
    除了简单的表达式还有复杂的表达式,它是由简单表达式构成的,将简单表达式组合成复杂表达式最常见的方法就是使用运算符![细说JavaScript表达式和运算符号详解](https://img-blog.csdnimg.cn/direct/2781400b25be4b38bbf99d0c1b93d169.png)一、表达式表达式分为简单表达式和复杂......
  • 细说JavaScript BOM之window对象
    window对象是JavaScript中最大的对象,其他对象都是window对象的一部分,window对象表示浏览器的一个实例,在浏览器中它有双重身份,既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript标准中规定的Globel(全局)对象。第二个身份说明了我们在网页中定义的任何一个变量、函数和对......
  • 什么是JavaScript BOM
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9466bdfb467e4a49b64c69669d68d396.png)BOM是BrowserObjectModel的缩写,即浏览器对象模型。由于BOM是和浏览器相关的一些操作,因此产生的后果就是无数的浏览器厂商各自使用自己的一套方式实现BOM(当然现在这个问题基本......
  • 2024年常用的数据恢复软件推荐
    引言:在现代社会中,我们越来越依赖于电子设备来保存和管理我们的个人和工作数据。然而,数据丢失的风险也随之增加。无论是由于误删除、硬件故障还是其他原因,数据丢失对我们造成的损失都是不可忽视的。因此,具备一款可靠的、专业的数据恢复软件是非常有必要的。本文将向大家推荐几款值得......
  • 什么是DOM?(JavaScript DOM是什么?)
    1、DOM简洁DOM是js中最重要的一部分,没有DOM就不会通过js实现和用户之间的交互。window是最大的浏览器对象,在它的下面还有很多子对象,我们要学习的DOM就是window对象下面的document对象DOM(DocumentObjectModel)是由W3C指定的用于访问诸如XML和HTML等结构化文档的标准W3CDOM......
  • 细说JavaScript BOM之HTML5新特性
    1、applicationCache对象什么是ApplicationCache呢?HTML5引入了应用程序缓存技术,意味着Web应用可进行缓存,并在没有网络的情况下使用,通过创建cachemanifest文件,可以轻松的创建离线应用。ApplicationCache带来的优势:1.离线浏览2、提升页面载入速度3、降低服务器压力需要......
  • 细说JavaScript BOM之window常用子对象
    一、locationlocation翻译过来就是位置的意思,打开浏览器窗口大家可以看到导航栏上有一个URL地址。//例如https://www.zhishunet.com//分心可知,它使用的网络协议是https服务器名称是www,zhishunet.comlocation常用对象属性属性描述search设置或返回从问好(?......
  • JavaScript DOM可以做什么?
    1、通过id获取标签元素DOM是文档对象模型,它提供了一些属性和方法来方便我们操作document对象,比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素//用法window.document.getElementById('id');//例子<!DOCTYPEhtml><html><head><metacharset="U......
  • Servlet系列:(HttpServletRequest、HttpServletResponse、ServletContext、ServletConfi
    HttpServletRequestHttpServletRequest对象:主要作用是用来接收客户端发送过来的请求信息,例如:请求的参数,发送的头信息等都属于客户端发来的信息,service()方法中形参接收的是HttpServletRequest接口的实例化对象,表示该对象主要应用在HTTP协议上,该对象是由Tomcat封装好传递过......
  • 中间件 ZK分布式专题与Dubbo微服务入门 4-15 acl的常用使用场景
    0课程地址https://coding.imooc.com/lesson/201.html#mid=12711 1重点关注1.1zk集群,主从节点,心跳机制(选举模式) 选举模式介绍1xx主节点(主人),yy和zz从节点(奴隶)2xx主节点挂掉了,yy和zz竞争当主人,结果zz成功上位,zz是主节点,yy是从节......