JavasScript 的对象事件的处理程序

1、鼠标事件

常用的鼠标事件有MouseDown、MouseUp、MouseMove、MouseOver、MouseOut、Click、Blur及Focus等事件。

mousedown：按下鼠标键时触发

 mouseup：抬起鼠标键时触发

 click：单击鼠标时触发

 dblclick：在同一个元素上双击鼠标时触发

 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件

 mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件

 wheel：在浏览器窗口滚动鼠标滚轮时触发

代码：

 // 为某个节点添加事件监听器box = document.getElementById("b1");box.addEventListener( "mousedown",  function(){console.log("你的鼠标按下了！");} );box.addEventListener( "mouseup",  function(){console.log("你的鼠标抬起了！");} );box.addEventListener( "click",  function(){console.log("你的鼠标单击了！");} );box.addEventListener( "dblclick",  function(){console.log("你的鼠标双击了！");} );box.addEventListener( "mouseenter",  function(){console.log("你的鼠标进入目标元素了！");} );box.addEventListener( "mouseleave",  function(){console.log("你的鼠标离开目标元素了！");} );// 为浏览器窗口对象添加事件监听器：以滚动监听为例window.addEventListener( "wheel",  function(){console.log("你的鼠标滚轮正在滚动...");} );
box.addEventListener( "mousedown",function(){console.log("鼠标按下事件已触发");});box.addEventListener( "mouseup",function(){console.log("鼠标抬起事件已触发");});box.addEventListener( "click",function(){console.log("鼠标单击事件已触发");});box.addEventListener( "dblclick",function(){console.log("鼠标双击事件已触发");});box.addEventListener( "mouseenter",function(){console.log("鼠标进入节点事件已触发");});box.addEventListener( "mouseleave",function(){console.log("鼠标离开节点事件已触发");});// 窗口监听鼠标滚动window.addEventListener( "wheel",function(){console.log("鼠标滚动事件已触发");});

结果：

2、键盘事件

常用的键盘事件有KeyDown、KeyPress、KeyUp、Select 和Change事件。

1.KeyDown事件

在键盘上按下一个键时，发生KeyDown事件。在这个事件发生后，由JavaScript自动调用 onKeyDown 句柄。该句柄适用于测览器对象document、图像、超链接及文本区域。

2.KeyPress事件

在键盘上按下一个键后且字符被显示出来之前发生KeyPress事件。在这个事件发生后，由JavaScript 自动调用onKeyPress 句柄。该甸柄适用于浏览器对象document、图像、超链接及文本区域。KeyDown事件总是发生在KeyPress事件之前。如果这个事件处理函数返回false值，就不会产生KeyPress事件。

3.KeyUp事件

在键盘上按下一个键，再释放这个键的时候发生KeyUp事件。在这个事件发生后由JavaScript 自动调用onKeyUp句柄。该句柄适用于浏览器对象document、图像、超链接及文本区域。

一个典型的按键会产生所有这3种事件，依次是KeyDown、KeyPress、按键释放时的KeyUp。KeyDown 触发后，不一定触发KeyUp。当KeyDown 按下并拖动鼠标，那么将不会触发KeyUp事件。

4.Select事件

选定文本输入框或文本输入区域的一段文本后，发生Select事件。在Select事件发生后，由JavaScript 自动调用onSelect 句柄。onSelect句柄适用于文本输入框以及文本输入区。

5)Change 事件

一个选择框、文本输入框或者文本输入区域失去焦点，其中的值又发生改变时，就会发生Change事件。在Change事件发生时，由 JavaScript 自动调用onChange句柄。Change事件是一个非常有用的事件，它的典型应用是验证一个输入的数据。
 

代码：

 <title>键盘事件</title><style>#output {  margin-top: 20px;  padding: 10px;  border: 1px solid #ccc;  width: 300px;  height: 100px;  /*  超出这个盒子的内容，以纵向滚动的方式展示 */overflow-y: scroll;/* 保持空白符和换行符 */ white-space: pre-wrap; }  </style>  
</head>  
<body>  <div id="output"></div>  <script>  // keydown：按下键盘时触发// keyup：抬起键盘时触发// 获取显示按键信息的div节点const outputDiv = document.getElementById('output');  document.addEventListener( "keydown",function(event){console.log(`有键盘被按下: ${event.key}`);})// 监听整个文档的keydown事件  document.addEventListener('keydown',function(event) {  // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）   const keyCode = event.key; // 拼凑输出字符串const message = `键盘 ${keyCode}  被按下`; // 将拼凑好的字符串，添加到输出区域  outputDiv.textContent += message + '\n';  outputDiv.scrollTop = outputDiv.scrollHeight;  // 自动滚动到输出区域的底部 // clientHeight 获取元素高度包括 padding 部分，但是不包括 border/margin // clientWidth 获取元素宽度包括 padding 部分，但是不包括 border/margin // scrollHeight 元素总高度，它包括 padding ，但是不包括 border/margin，  包括溢出的不可见内容// scrollWidth 元素总宽度，它包括 padding ，但是不包括 border/margin ，  包括溢出的不可见内容 // scrollLeft 元素的水平滚动条向右滚动的像素数量// scrollTop 元素的垂直滚动条向下滚动的像素数量});  </script>

 结果：

3.表单对象

form 对象（称表单对象或窗体对象）提供一个让客户端输入文字或选择的功能。例如单选按钮、复选框、选择列表等由<form>标签组构成，JavaScript 自动为每一个表单建立个表单对象，并可以将各个子元素中用户提供的信息送至服务器进行处理，当然也可以在JavaScript 脚本中编写程序，对数据进行处理。

表单中的基本元素(子对象)有按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等。在JavaScript 中婴访问这些基本元素，必须通过对应特定的表单元素的名字来实现.每一个元素主要是通过该元素的属性或方法来引用。注意，有些属性无法在页面设计时使用，只能在编程代码中使用。

调用form对象的一般格式为

<form name="表单名"action="URL"...>

<input type="表项类型"name="表项名”value="默认值”事件="方法函数"….>

</form>

1.Text单行单列输人元素

功能：对Text标识中的元素实施有效的控制。

属性：name，设定提交信息时的信息名称；value，用于设定出现在Text文本框中的value 值；defaultvalue，设定Text元素的默认值。

方法：blur(），当前焦点移出；select(），高亮文字。

事件：onFocus，当Text 获得焦点时，产生该事件；onBlur，当元素失去焦点时，产生该事件；onSelect，当文字被高亮显示后，产生该文件；onChange，当Text元素内的值改变时，产生该文件。

2.Textarea多行文本域输人元素

功能：对Textarea中的元素进行控制。

属性：name，设定提交信息时的信息名称；value，设定出现在Textarea多行文本域中的value值；defaultvalue，元素的默认值。

方法：Blur()，失去焦点；Select(），高亮文字。

事件：onBlur，当失去输入焦点后产生该事件；onFocus，当输入获得焦点后，产生该文件；onChange，当文字值改变时，产生该事件；onSelect，高亮文字，产生该文件。

3.Select 选择元素

功能：实施对下拉选择元素的控制。

属性：name，设定提交信息时的信息名称；value，用于设定Select下拉列表框中的value 值；length，对应Select 中的length；options，组成多个选项的数组；SelectIndex，指明

个选项；Text，选项对应的文字；Selected，指明当前选项是否被选中；Index，指明当前选

系的位置（索引值）；defaultSelected，默认选项。

事件：onBlur，当Select 选项失去焦点时，产生该事件；onFocus，当Select 获得焦点时，

产生该事件；onChange，选项状态改变后，产生该事件。

4.Button 按钮

功能：对Button按钮的控制。

属性：name，设定提交信息时的信息名称，对应文档中Button的name；value，设定当

前按钮上显示的value值。

方法：Click(），该方法类似于单击一个按钮。

事件：onClick，当单击Button按钮时，产生该事件。

5.Checkbox复选框

功能：实施对一个具有复选框中元素的控制。

属性：name，设定提交信息时的信息名称；value，用于Checkbox复选框旁边显示的

value 信息；Checked，该属性设定复选框的选中状态，Checked值为被选中。

方法：Click(）：使得鼠标单击复选框的某一个项。事件：onClick：当复选框被选中时，产生该事件。

6.Password口令

功能：对具有口令输入模式的文本框元素的控制。

属性：name，设定提交信息时的信息名称，对应HTML文档中 Password中的name;value，用于设定出现在 Password文本框中的密文模式的 value 值；defaultvalue,Password文本框中的密文模式的默认值。

方法：Select(），高亮口令文本；Blur()，失去 Passward焦点；Focus(),获得 Password焦点。

7.Submit 提交元素

功能：对一个具有提交功能按钮的控制。

属性：name，设定提交信息时的信息名称，对应HTML文档中Submit；value，用于设

定提交按钮上显示的value值。

方法：Click()，相当于单击Submit 按钮。

事件：onClick，当单击该按钮时，产生该事

代码：

<body><!-- 简单的HTML表单 -->  <form id="myForm" >  姓名: <input type="text" id="name" value="在此处输入你的姓名">  <br>  邮箱: <input type="email" id="email" value="在此处输入你的邮箱">  <br>  <input type="submit" value="提交"><input type="reset" value="重置">  
</body>
<script>// 获取表单节点const form = document.getElementById('myForm');  // 添加“表单提交”事件监听器  form.addEventListener('submit', function(event) {  event.preventDefault();   // 阻止表单的“默认提交行为”// 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）  alert('表单提交按钮被按下! (但默认提交行为被截止了)');  // 你可以在这里添加其他代码来处理表单数据  // 例如，获取输入值：  const name = document.getElementById('name').value;  const email = document.getElementById('email').value;  console.log('Name:', name);  console.log('Email:', email);  }); // 添加表单重置事件监听器  form.addEventListener('reset', function(event) {  // 弹出警告框alert('表单已经重置! ');  });// 1.获取姓名输入框节点const inputElement = document.getElementById('name'); // 2.为表单的姓名输入框添加 select 选中事件监听器  inputElement.addEventListener('select', function(event) {  console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);  //打印选中文本的起始索引和结束索引// 注意： selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);  console.log('已选中文本:', selectedText);  });</script>
</html>

 

 


 

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

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

相关文章

华为云安装docker

华为云安装docker

docker_docker-compose_install: 代替官网的一键安装脚本&#xff0c;使用docker包进行离线安装 bash <(curl -sL https://raw.githubusercontent.com/1scripts/docker_docker-compose_install/main/quick_install.sh) 华为镜像&#xff1a; https://console.huaweicloud.…
阅读更多...
如何实用穿山甲APP搭建你的广告联盟？

如何实用穿山甲APP搭建你的广告联盟？

在当下蓬勃兴盛的移动互联网范畴&#xff0c;广告联盟穿山甲无疑堪称一个具备深远影响力的关键平台。它系由在科技领域声名远扬的字节跳动悉心打造并予以推出&#xff0c;其创建的初衷便是矢志为众多的开发者和广告主精心构筑一个高效能、精准化且极具价值的广告投放与变现服务…
阅读更多...
【Python实战案例】爬虫项目实例（附赠源码）

【Python实战案例】爬虫项目实例（附赠源码）

文章目录 声明安装必要的库项目结构技术细节小结 声明 请您遵守网站的robots文件规定&#xff0c;本文目的只是做学习交流使用&#xff0c;包括多个模块&#xff0c;例如数据存储、日志记录、错误处理、多线程或异步请求 安装必要的库 pip install requests beautifulsoup4 sq…
阅读更多...
PL/SQL developer debug 方法及存储过程等

PL/SQL developer debug 方法及存储过程等

文章目录 打开 PL/SQL&#xff0c;找到 fun右键 fun&#xff0c;选择【添加调试信息(U)】右键 fun&#xff0c;选择【查看(O)】在 fun 中需要调试的位置打上断点右键 fun&#xff0c;选择【测试(X)】点击执行再点击执行进入断点 执行结果 打开 PL/SQL&#xff0c;找到 fun 右键…
阅读更多...
利用 Avalonia UI 构建 Blazor 混合应用程序

利用 Avalonia UI 构建 Blazor 混合应用程序

Blazor 是一个 .NET 前端框架&#xff0c;用于仅使用 .NET 技术构建 Web 应用程序。2021 年&#xff0c;Blazor 扩展到桌面端&#xff0c;推出了 Blazor Hybrid&#xff08;混合&#xff09;&#xff0c;使开发者可以在桌面平台上使用已有的技能。 Blazor 混合应用程序是传统的…
阅读更多...
ELK-ELK基本概念_ElasticSearch的配置

ELK-ELK基本概念_ElasticSearch的配置

文章目录 一、什么是ELK&#xff1f;有什么用&#xff1f;ELK是什么&#xff1f;ElasticsearchLogstashKibana ELK的作用 二、ElasticSearch的安装与基本配置为何需要依赖JDK&#xff1f;使用yum install java-11-openjdk和使用Oracle官网提供的jdk的rpm包安装JDK的区别 参考资…
阅读更多...
怎么查看navicat的数据库密码

怎么查看navicat的数据库密码

步骤1:打开navicat连接数据库工具&#xff0c;顶部的文件栏-导出结果-勾选导出密码-导出 步骤2&#xff1a;导出结果使用NotePad或文本打开&#xff0c;找到&#xff0c;数据库对应的的Password"995E66F64A15F6776“”的值复制下来 <Connection ConnectionName"…
阅读更多...
linux驱动-i2c子系统框架学习(1)

linux驱动-i2c子系统框架学习(1)

可以将整个 I2C 子系统用下面的框图来描述&#xff1a; 可以将上面这一 I2C 子系统划分为三个层次&#xff0c;分别为用户空间、内核空间和硬件层&#xff0c;内核空间就包括 I2C 设备驱动层、I2C 核心层和 I2C 适配器驱动层&#xff0c; 本篇主要内容就是介绍 I2C 子系统框架中…
阅读更多...
基于SSM的企业管理系统（源码+lw+调试+技术指导）

基于SSM的企业管理系统（源码+lw+调试+技术指导）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…
阅读更多...
【金融风控】相关业务介绍及代码详解

【金融风控】相关业务介绍及代码详解

金融风控相关业务介绍 【了解】项目整体介绍 1.风控业务和风控报表</span> 零售金融产品 相关的指标 风控建模流程 ​ #2.特征工程 特征构造 特征筛选 ​ 3.评分卡模型构建 逻辑回归 集成学习 XGBoost LightGBM 模型评估 ​ #4.样本不均衡问题/异常点检测 【了解】今日…
阅读更多...
Late Chunking×Milvus：如何提高RAG准确率

Late Chunking×Milvus：如何提高RAG准确率

01. 背景 在RAG应用开发中&#xff0c;第一步就是对于文档进行chunking&#xff08;分块&#xff09;&#xff0c;高效的文档分块&#xff0c;可以有效的提高后续的召回内容的准确性。而对于如何高效的分块是个讨论的热点&#xff0c;有诸如固定大小分块&#xff0c;随机大小分…
阅读更多...
蓝桥杯备赛（持续更新）

蓝桥杯备赛（持续更新）

16届蓝桥杯算法类知识图谱.pdf 1. 格式打印 %03d&#xff1a;如果是两位数&#xff0c;将会在前面添上一位0 %.2f&#xff1a;会保留两位小数 如果是long&#xff0c;必须在数字后面加上L。 2. 进制转化 2.1. 十进制转任意进制&#xff1a; 十进制转任意进制时&#xff…
阅读更多...
责任链模式 Chain of Responsibility

责任链模式 Chain of Responsibility

1 意图 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为止。 2 结构 Handler 定义一个处理请求的接口;(可选)实现后继链。 ConcreteHandler …
阅读更多...
SQL Server 2008 R2 详细安装教程及错误解决教程

SQL Server 2008 R2 详细安装教程及错误解决教程

SQL Server 2008 R2 详细安装教程及错误解决教程 文章目录 SQL Server 2008 R2 详细安装教程及错误解决教程1.装载或解压ISO文件2. 运行setup程序3. 下载并安装.NET Framework3.54.选择全新安装或向现有安装添加功能5.输入秘钥同意条款6.选择安装类型7.设置角色8.功能选择9.实例…
阅读更多...
国际版JAVA同城打车源码同城服务线下结账系统源码适配PAD支持Android+IOS+H5

国际版JAVA同城打车源码同城服务线下结账系统源码适配PAD支持Android+IOS+H5

架构分析 导航栏&#xff1a;位于界面上方&#xff0c;包含了“数据中心”、“消息”、“用户中心”等主要功能模块的入口&#xff0c;方便用户快速访问。左侧功能模块&#xff1a;在界面的左侧&#xff0c;以列表形式展示了多个功能模块&#xff0c;如“数据中心”、“消息中…
阅读更多...
营销页面设计：精准触达目标群体的艺术

营销页面设计：精准触达目标群体的艺术

在当今数字化的商业世界中&#xff0c;营销页面设计扮演着至关重要的角色。成功的营销页面设计不仅仅是美观那么简单&#xff0c;它需要结合场景设计、精准定位目标群体、巧妙运用设计元素以及精心策划的色彩搭配&#xff0c;共同编织出一张引人入胜的视觉网络。 今天就以洋河…
阅读更多...
gdb和make工具

gdb和make工具

gdb工具&#xff1a; GDB的主要功能 断点设置&#xff1a;允许开发者在特定的代码行设置断点&#xff0c;当程序执行到该行时会自动暂停&#xff0c;方便开发者进行调试和分析。 变量查看与修改&#xff1a;在程序运行过程中&#xff0c;可以查看和修改变量的值&#xff0c;以…
阅读更多...
爬虫-------字体反爬

爬虫-------字体反爬

目录 一、了解什么是字体加密 二. 定位字体位置 三. python处理字体 1. 工具库 2. 字体读取 3. 处理字体 案例1：起点 案例2：字符偏移： 5请求数据 - 发现偏移量 5.4 多套字体替换 套用模板 版本1 版本2 四.项目实战 1. 采集目标 2. 逆向结果 一、了解什么是…
阅读更多...
web实操3——servlet

web实操3——servlet

课程链接b站&#xff1a;第12课 https://www.bilibili.com/video/BV1qv4y1o79t?spm_id_from333.788.videopod.episodes&vd_source05a3c1275b87b47507d869e9349ee3cd&p233 为什么只要写一个实现Servlet的类就可以被调用 tomcat根据url去web.xml里定位到我们写的类后&…
阅读更多...
HTML 基础标签——分组标签 ＜div＞、＜span＞ 和基础语义容器

HTML 基础标签——分组标签 ＜div＞、＜span＞ 和基础语义容器

文章目录 1. `<div>` 标签特点用途示例2. `<span>` 标签特点用途示例3. `<fieldset>` 标签特点用途示例4. `<section>` 标签特点用途示例5. `<article>` 标签特点用途示例总结HTML中的分组（容器）标签用于结构化内容，将页面元素组织成逻辑区域…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023