【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爱好者指正,小弟定当虚心受教! 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于esp-idf的arm2d移植

什么是ARM2D Arm在Github上发布了一个专门针对“全体” Cortex-M处理器的2D图形加速库——Arm-2D 我们可以简单的把这个2D图形加速库理解为是一个专门针对Cortex-M处理器的标准“显卡驱动”。虽然这里的“显卡驱动”只是一个夸张的说法——似乎没有哪个Cortex-M处理器“配得上…

丝杆支撑座:滚珠丝杆稳定运行的守护者!

丝杆支撑座是丝杆和电机之间连接的重要组成部分,发挥着非常重要的功能。提到丝杆支撑座和滚珠丝杆,很多人都会想到支撑关系,但丝杆支撑座作为滚珠丝杆系统中至关重要的角色,其作用远不止于简单的支撑。 丝杆支撑座安装过程非常简单…

绘唐3是免费的吗?

绘唐科技是一家中国电子信息产品制造商和供应商,成立于2005年。公司主要经营智能硬件、智能穿戴设备、智能家居设备和智能交通设备等领域的产品开发和销售。绘唐科技拥有强大的研发团队和制造能力,能够为客户提供定制化的产品解决方案。 绘唐科技的产品种…

CS-隐藏防朔源-数据转发-iptables(Linux自带的防火墙)

免责声明:本文仅做技术交流与学习... 目录 准备环境: 1-iptables转发机设置转发: 2-CS服务器配置iptables服务器的IP 准备环境: 两台外网服务器. --iptables服务器就是做一个中转...封了中转就没了... 1-iptables转发机设置转发: iptables -I INPUT -p tcp -m tcp --dport 8…

一个简化的C语言扫地机器人系统编写步骤

使用C语言直接编写一个完整的智能扫地机器人系统是非常复杂的,因为这不仅涉及到底层硬件的控制,还包括网络通信、用户交互等多个方面。然而,我们可以将任务拆分为几个部分,并专注于使用C语言编写与硬件交互和可能的一些基础网络通…

ACC:Automatic ECN Tuning for High-Speed Datacenter Networks 相关知识点介绍(一)

目录 ACC(Adaptive Congestion Control) 总结 结合 ACC 和 ECN ECN ECN(Explicit Congestion Notification) 静态 ECN 动态 ECN 对比 总结 FCT——flow completion time 具体解释 小鼠流和大象流 小鼠流(…

【最新综述】基于伪标签的半监督语义分割

Semi-Supervised Semantic Segmentation Based on Pseudo-Labels: A Survey 摘要: 语义分割是计算机视觉领域的一个重要而热门的研究领域,其重点是根据图像中像素的语义对其进行分类。然而,有监督的深度学习需要大量数据来训练模型&#xff…

GPT-5的到来:智能飞跃与未来畅想

IT之家6月22日消息,在美国达特茅斯工程学院的采访中,OpenAI首席技术官米拉穆拉蒂确认了GPT-5的发布计划,预计将在一年半后推出。穆拉蒂形象地将GPT-4到GPT-5的飞跃比作高中生到博士生的成长。这一飞跃将给我们带来哪些变化?GPT-5的…

电路笔记(电源模块):TPS82130降压模块

芯片引脚说明 Layer 1 1 2 3 4 5 6 7 8 SS/TR PG FB VOUT EN VIN GND VOUT Thermal Pad 使能引脚,高电平启动。 反馈参考引脚。 连接到该引脚的外部电阻分压器对输出电压进行编程。 电源开漏输出引脚。 软启动和电压跟踪引脚。 上拉电阻可以连接到任何低于6V的电压。…

如何使用WxPusher向个人微信推送发送实时消息,比如定时任务等

wxpusher-sdk-java这个框架开源了:GitHub - wxpusher/wxpusher-sdk-java: 微信消息实时推送服务[WxPusher]的Java版本sdk,可以通过API实时给个人微信推送消息。wechat pusher. 文档地址:WxPusher微信推送服务 WxPusher (微信推送服务)是一个…

Spring Boot与MyBatis的集成应用

Spring Boot与MyBatis的集成应用 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们来聊聊Spring Boot与MyBatis的集成应用。MyBatis是一款优秀的持久层框…

湖北大学2024年成人高考函授报名专升本教育学专业介绍

湖北大学,作为一所历史悠久、文化底蕴深厚的学府,其成人高等继续教育体系更是为广大学子提供了一片展翅高飞的蓝天。在这片知识的海洋中,专升本教育学专业如同一颗璀璨的明珠,闪耀着智慧的光芒。 湖北大学的专升本教育学专业&…

Postgresql从小白到高手 九 : psql高级查询及内部视图使用

Postgresql从小白到高手 九:pgsql 复杂查询及内部表高级查询 文章目录 Postgresql从小白到高手 九:pgsql 复杂查询及内部表高级查询一、多表查询二、pgsql内部表1.内部表2.内部表查询应用 一、多表查询 内联 :inner join on 简写 join on 结果集只有符合 筛选条件…

AI Native应用中的模型微调

AI Native应用中的模型微调 随着人工智能技术的飞速发展,AI Native应用已成为当今软件开发的前沿阵地。在AI Native应用中,模型微调是提升模型性能的关键步骤,它通过在特定领域的数据上进行学习,使模型更好地适应应用场景&#x…

Android U Settings 应用中 APN 菜单实现的代码逻辑

功能简介 MobileNetwork移动网络设置页面下有【接入点设置】(APN)。 问题:为什么Controller初始化找不到pref,然后报错。 Note:什么时候切换成Controller的呢?在Android T&U 上还没有更新成kt实现 ,但是已经有Controller的方案。 流程逻辑 1、界面“telephony_a…

软件可重用的“rule-of-three“

《软件工程的事实与谬误》《Facts and Fallacies of Software Engineering》中提到: 软件可重用有两个“三规则”: 构建可重用组件的难度是一次性组件的三倍一个可重用的组件应该在三个不同的应用程序中试用,然后它才会足够通用以接受到一个…

压缩wsl的磁盘占用空间

本文说的是wsl 2。 1. 关闭wsl,在cmd窗口中输入如下命令: wsl --shutdown 2. 接着输入:diskpart 这个命令会弹出新的窗口 3. 在新的窗口中输入: select vdisk file"d:\vos\unbutu\ext4.vhdx" 其中的 d:\vos\unbut…

Zoom社招前端面经

1. 了解事件循环机制么? JS 中的事件循环(Event Loop)是一种用于管理和调度异步任务执行的机制。它使得 JS 可以处理异步操作,如定时器、事件处理、网络请求等,而不会阻塞主线程的执行。 2. 说一下什么是宏任务微任务…

群晖系统百度网盘套件卸载之后无法再次安装 ContainerManager项目无法删除

前言 最近重新组了个NAS,在套件迁移的时候遇到个头疼的问题。在用矿神的百度网盘在迁移的时候出错了,于是我自己删掉baiduapp得容器和镜像然后卸载套件。不知道中间出了啥问题,套件是已经卸载了,但是群晖ContainerManager套件中的…

Adobe Indesign 操作

页面设计 页面设置 版面:图文和空白部分的总和。 版心:规划在版面中排印文本和图片的部分。 开本:单个页面的宽度和高度。 如图所示,新建文件,自定义是210297毫米。这个数据是开本大小。 点击“边距和分栏”&#…