【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…

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 (微信推送服务)是一个…

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

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

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

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

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

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

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

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

Adobe Indesign 操作

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

Vue3学习笔记<->创建第一个vue项目

新建一个项目目录 找一个盘新建一个目录,我这里在D盘创建一个vuedemo目录作为项目存放的目录。使用idea打开目录。   单击ieda底部的按钮“Terminal”,打开命令行窗口,如果命令行窗口当前目录不是“vuedemo”,就切换到“vuedem…

抖音营销新策略:MessageBox与HubSpot集成,引领企业获客新潮流

在全球数字化浪潮中,抖音以其独特的短视频形式、庞大的用户群体和高度互动性,成为了企业出海战略中不可或缺的一环。抖音营销不仅仅是简单的内容发布和互动,它更是一种深度策略和创新思维的体现。今天将深入探讨抖音营销的核心价值、应用场景…

了解和解决“vcruntime140_1.dll”相关问题,有效修复vcruntime140_1.dll错误弹窗问题

在Windows操作系统中,经常会遇到各种DLL(动态链接库)错误,它们是Windows应用运行不可或缺的一部分。其中,“vcruntime140_1.dll”是一个常见的DLL文件,这个文件与Microsoft Visual Studio C 运行时相关联。…

使用Python Selenium,动态网页不再是难题!

目录 1、直接执行JS代码 🌐 1.1 execute_script基础用法 1.2 带参数执行JS函数 1.3 获取执行结果 2、使用execute_async_script异步执行 🔄 2.1 适用场景分析 2.2 实现异步操作示例 2.3 错误处理与调试技巧 3、JS与页面元素交互 👤 3.1 修改DOM属性 3.2 触发事…

C# 23设计模式备忘

创建型模式:单例(Singleton)模式:某个类只能生成一个实例,该类提供了一个全局访问点供外部获取该实例,其拓展是有限多例模式。 原型(Prototype)模式:将一个对象作为原型&…

下载和使用SLUN数据集

1. 下载数据集 网址在https://opendatalab.com/OpenDataLab/lsun/tree/main/raw/scenes 下载bedroom_val_lmdb.zip 然后解压后会又两个文件,一个data.mdb,另一个lock.mdb。 2. 使用torchvison使用LSUN数据集 我把解压后的bedroom_val_lmdb放在/home/…