【JavaScript】事件绑定

目录

一、什么是事件

二、常见事件

2.1 鼠标事件

2.2 键盘事件

2.3 表单事件

2.4 页面加载事件

三、浏览器弹窗三种方式

四、事件绑定函数方式

五、事件触发方式


一、什么是事件

事件就是行为动作。在HTML中事件可以是浏览器的行为,也可以是用户的行为。当这些行为发生时,可以自动调用JS中对应的函数来对这些行为做出处理,所谓的事件驱动就是行为触发函数中代码的运行这一特点。

二、常见事件

2.1 鼠标事件

onclick: 鼠标单击事件

ondblclick: 鼠标双击事件

mouseover: 鼠标移至事件,即鼠标移动到元素上后触发的事件

mousemove:鼠标移动事件,即鼠标在元素上每移动一个像素就触发该事件

mouseleave: 鼠标离开事件,即鼠标离开元素后触发的事件

2.2 键盘事件

onkeydown: 键盘按下事件

onkeyup: 键盘松开事件

2.3 表单事件

onfocus:焦点事件,即当元素标签获取到光标焦点时触发

onblur:标签元素失去光标焦点时触发

onchange: 标签元素内容发生改变时触发。this.value代表当前元素标签的值

onsubmit: 在用户点击提交按钮且表单开始提交参数时触发。

event.preventDefault()阻止组件的默认行为,可以阻止表单的提交。

onreset: 清空表单内容时触发。

2.4 页面加载事件

onload: 页面加载完毕事件,浏览器加载完网页代码后会自动调用此事件绑定的处理函数。即网页文件中的代码都加载完毕后执行的事件。通常配合dom编程事件绑定使用,以便可以通过目标元素ID获取到目标元素标签。

三、浏览器弹窗三种方式

alert("提示对话框")

prompt("输入对话框,返回用户输入的字符串值")

confirm("确认对话框,返回值为boolean类型")

四、事件绑定函数方式

  • 通过元素属性绑定。如" on事件类型 =“函数名( )”"

  • 通过DOM编程动态绑定。

注意:

①一个标签元素可以同时绑定多种事件。

②一个事件可以同时绑定多个处理函数。

五、事件触发方式

行为触发: 用户对某个标签元素的行为操作或浏览器的行为。

DOM编程触发:通过dom获取目标元素对象,然后对象调用事件函数来触发标签元素的事件。

@声明:“山月润无声”博主知识水平有限,以上文章如有不妥之处,欢迎广大IT爱好者指正,小弟定当虚心受教! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/747737.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

零知识证明基础:对称加密与非对称加密

1、绪论 在密码学体系中,对称加密、非对称加密、单向散列函数、消息认证码、数字签名和伪随机数生成器被统称为密码学家的工具箱。其中,对称加密和非对称加密主要是用来保证机密性;单向散列函数用来保证消息的完整性;消息认证码的…

前端实现对本地文件的IO操作

前言 在网页中,前端已经可以读取本地文件系统,对本地的文件进行IO读写,甚至可以制作一个简单的VScode编辑器。这篇文章以渐进式方式实现此功能,文末附上所有代码。 首先看整体功能演示 功能概述 我们将实现一个简单的 Web 应…

Xilinx FPGA:vivado这里记录一个小小的问题

问题描述:uart_data从rx模块输入到ctrl模块后就没有值了。 问题一:首先我仿真例化了两个模块,并且,我选取了单独例化的rx模块中的uart_data 的值,所以在仿真中它是有值的。 timescale 1ns / 1ps module test_bench_TO…

QCC51XX---开启手机log日志

QCC51XX---系统学习目录_trbi200软件-CSDN博客 目录 1.Vivo 2.华为 3.小米 4.三星 5.oppo 1.Vivo *#*#112#*#* 输入命令后会进入log日志系统(由于版本原因,界面可能不同),打开log开关,log就会在后台自动录制。 点击设置,则可进入图1(右边)的界面,可以导出log,导出…

小程序中echarts的bug

这个文字在手机上显示会有黑的的阴影 textStyle: {fontSize: 12,wrap: true,textShadowColor: "#fff", // 文字本身的阴影颜色textShadowBlur: 10, // 文字本身的阴影长度textShadowOffsetX: 10, // 文字本身的阴影X偏移textShadowOffsetY: 10, //阴影Y偏移}

转:关于征集第三批工业软件新场景新技术难题解决思路的公告

工业软件是先进工业知识与经验的凝炼,工业软件自身的先进性既来自对先进工业先进需求的汲取提炼,也来自对根技术新突破、新成果的高效采用。为增强根技术新成果提供方与工业软件厂家或最终用户方的连接,促进国产工业软件差异化竞争力的打造&a…

游戏服务器研究三:bigworld 的 load balance 算法

1. 前言 bigworld 的 load balance 算法的大致思路是知道的,即 动态区域分割 动态边界调整。但具体是怎么实现的,不清楚,网上也不找到相关的文章介绍,所以只能自己看代码进行分析。 本文大致记录我所分析到的算法实现&#xff…

vue3项目登录成功后根据角色菜单来跳转指定页面(无首页)

前言:需求不想要首页,登录什么角色跳转到这个角色经常使用的页面。(例如:审核者角色的人输入用户名密码成功后就自动跳转到待审核的页面,仓库管理员登录成功则自动跳转到仓库列表) 需要解决的点和想法&…

C语言类型转换理解不同的基本类型为什么能够进行运算

类型转换 1.类型转换1.1隐式转换1.2常用算术转换1.2强制类型转换 1.类型转换 在执行算数运算时,计算机比C语言的限制更多。为了让计算机执行算术运算,通常要求操作数用相同的大小(即为的数量相同),但是C语言却允许混合…

SpringBoot优点达项目实战:登录功能实现(四)

SpringBoot优点达项目实战:登录功能实现(四) 文章目录 SpringBoot优点达项目实战:登录功能实现(四)1、查看接口2、查看数据库3、代码实现1、创建实体类2、controller实现3、service层实现4、Mapper层 4、测…

JVM专题十二:JVM 中的收集器二

上一篇JVM专题十一:JVM 中的收集器一咱们介绍了垃圾收集器的分类,已经主流的分代垃圾收集器重点看了CMS与三色标记算法,本篇咱们继续来看意G1、ZGC等。 G1收集器 G1(Garbage-First Garbage Collector)是一种服务器端的…

React实现二级评论

1. 什么是二级评论 图片来源–blackfrog的掘金文章 口语化的讲当我发布一个评论的时候就是一级评论,当我回复我发布的评论的时候就是二级评论并且将所有回复二级评论的评论也归于二级评论。 2. 二级评论功能的实现逻辑 在这里后端设计了四个接口分别是 获取所有…

千呼新零售2.0-OCR拍照识别采购单

千呼新零售2.0系统是零售行业连锁店一体化收银系统,包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体,线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物、中医养生、大健康等连锁店…

目标检测系列(四)利用pyqt5实现yolov8目标检测GUI界面

目录 1、pyqt5安装 2、PyCharm添加Qt Designer、PyUIC 3、Qt Designer设计界面 4、根据ui文件自动生成py文件 5、修改py文件来调用检测程序 6、执行py文件启动 1、pyqt5安装 Qt Designer:一个用于创建图形用户界面的工具,可轻松构建复杂的用户界面…

ChatUI:使用Gradio.NET为LLamaWorker快速创建大模型演示界面

Gradio.NET 是 Gradio 的.NET 移植版本。它是一个能够助力迅速搭建机器学习模型演示界面的库,其提供了简洁的 API,仅需寥寥数行代码就能创建出一个具备交互性的界面。在本篇文章中,我们将会阐述如何借助 Gradio.NET 为 LLamaWorker 快捷地创建…

Python 基础 (标准库):堆 heap

1. 官方文档 heapq --- 堆队列算法 — Python 3.12.4 文档 2. 相关概念 堆 heap 是一种具体的数据结构(concrete data structures);优先级队列 priority queue 是一种抽象的数据结构(abstract data structures)&…

【数据结构】——链表经典OJ(leetcode)

文章目录 一、 相交链表二、 反转链表三、 回文链表四、 环形链表五、 环形链表 II六、 合并两个有序链表七、 两数相加八、 删除链表的倒数第N个节点九、 随机链表的复制 一、 相交链表 双指针法 struct ListNode *getIntersectionNode(struct ListNode *headA, struct ListN…

MySQL进阶-索引-使用规则-最左前缀法则和范围查询

文章目录 1、最左前缀法则2、启动mysql3、查询tb_user4、查看tb_user的索引5、执行计划 profession 软件工程 and age31 and status 06、执行计划 profession 软件工程 and age317、执行计划 profession 软件工程8、执行计划 age31 and status 09、执行计划 status 010、执行…

直流电机双闭环调速Simulink仿真

直流电机参数: 仿真模型算法介绍: 1)三相整流桥,采用半控功率器件SCR晶闸管; 2)采用转速环、电流环 双闭环控制算法; 3)外环-转速环,采用PI 比例积分控制;…

通信系统网络架构_3.移动通信网络架构

移动通信网为移动互联网提供了强有力的支持,尤其是5G网络为个人用户、垂直行业等提供了多样化的服务。以下从业务应用角度给出面向5G网络的组网方式。 1.5GS与DN互连 5GS(5G System)在为移动终端用户(User Equipment,…