JS 事件 —— 表单事件

最新推荐文章于 2023-11-17 20:46:53 发布
最新推荐文章于 2023-11-17 20:46:53 发布
阅读量1.5k 收藏 6
点赞数
分类专栏： Web 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43621629/article/details/102696160
版权

Web前端基础 学习笔记

一、表单事件


1.1、onsubmit（绑定提交事件）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 事件-鼠标事件</title>
	<script>
		window.onload = function(){	
		
			var oForm = document.getElementsByTagName("form")[0];
			var aInput = document.getElementsByTagName("input")[0];

		// 绑定提交事件
			oForm.onsubmit = function(){
				console.log("submit");
				// 每次提交都会刷新页面，所以 return False 使其提交失败
				// 但提交事件依然发生（为了方便观察才这么做）
				return false;											// 可以注释观察效果
			}
			
		}
	</script>
</head>
<body>
	<div id="test" style="background-color: pink; width: 200px; height: 200px;">
	</div>
	<br><hr><br>
	<form action="http://www.baidu.com">
		<input type="text">
		<input type="submit">
	</form>
</body>
</html>

1.2、onfocus（聚焦） 与 onblur（失焦）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 事件-鼠标事件</title>
	<script>
		window.onload = function(){	
		
			var oForm = document.getElementsByTagName("form")[0];
			var aInput = document.getElementsByTagName("input")[0];

		// 焦点（鼠标点击文本框，使其为输入状态）
			aInput.onfocus = function(){
				console.log("focus(焦点事件)");
			}

		// 失焦（鼠标点击文本框外，使其退出输入状态）
			aInput.onblur = function(){
				console.log("onblur(失焦事件)");
			}
			
		}
	</script>
</head>
<body>
	<div id="test" style="background-color: pink; width: 200px; height: 200px;">
	</div>
	<br><hr><br>
	<form action="http://www.baidu.com">
		<input type="text">
		<input type="submit">
	</form>
</body>
</html>

1.3、onchange（ 内容改变(在文本框输入数据) + 失焦 才会触发 ）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 事件-鼠标事件</title>
	<script>
		window.onload = function(){	
		
			var oForm = document.getElementsByTagName("form")[0];
			var aInput = document.getElementsByTagName("input")[0];

		// 内容改变(文本框输入数据) + 失焦 才会触发
			aInput.onchange = function(){
				console.log("change");
			}
			
		}
	</script>
</head>
<body>
	<div id="test" style="background-color: pink; width: 200px; height: 200px;">
	</div>
	<br><hr><br>
	<form action="http://www.baidu.com">
		<input type="text">
		<input type="submit">
	</form>
</body>
</html>

在这里插入图片描述

1.4、oninput（输入事件）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 事件-鼠标事件</title>
	<script>
		window.onload = function(){	
		
			var oForm = document.getElementsByTagName("form")[0];
			var aInput = document.getElementsByTagName("input")[0];

		// 输入事件
			aInput.oninput = function(){
				console.log("input");
			}
			
		}
	</script>
</head>
<body>
	<div id="test" style="background-color: pink; width: 200px; height: 200px;">
	</div>
	<br><hr><br>
	<form action="http://www.baidu.com">
		<input type="text">
		<input type="submit">
	</form>
</body>
</html>

在这里插入图片描述



二、表单案例


2.1、要在浏览器实现如下功能：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 表单事件（提交显示）</title>
	<style>
		div{
			width: 300px;
			height: 200px;
			border: 3px solid #CECECE;
		}
	</style>
</head>
<body>
	<div></div><br>
	<input type="text">
	<input type="button" value="上去">

	<script type="text/javascript">
		var oDiv = document.getElementsByTagName("div")[0];
		var aInput = document.getElementsByTagName("input");


		// 第二个 input 触发事件
		aInput[1].onclick = function(){
			// 控制台显示第一个 input 的内容
			console.log(aInput[0].value);
			oDiv.innerHTML = oDiv.innerHTML + aInput[0].value;			// 添加的顺序会影响显示的顺序
			// 可以简写为：   oDiv.innerHTML += aInput[0].value;（+ "<br>" 可以换行）

			aInput[0].value = "";										// 内容提交后，清空输入框
		}

		// 在输入键盘按下 enter 提交数据
		aInput[0].onkeydown = function(e){
			if (e.keyCode == 13) {
				oDiv.innerHTML += aInput[0].value + "<br>";
				aInput[0].value = "";
			}
		}
	</script>
</body>
</html>

上述代码，存在冗余（重复代码），所以一般会把冗余的代码封装成函数。

2.2、改进

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 表单事件（提交显示）</title>
	<style>
		div{
			width: 300px;
			height: 200px;
			border: 3px solid #CECECE;
		}
	</style>
</head>
<body>
	<div></div><br>
	<input type="text">
	<input type="button" value="上去">

	<script type="text/javascript">
		var oDiv = document.getElementsByTagName("div")[0];
		var aInput = document.getElementsByTagName("input");
		
		function commentTxt(){
			oDiv.innerHTML += aInput[0].value + "<br>";
			aInput[0].value = "";
		}

		aInput[1].onclick = commentTxt;

		aInput[0].onkeydown = function(e){
			if (e.keyCode == 13){
				commentTxt();
			}
		}
	</script>
</body>
</html>
白菜执笔人
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSEventForm:JS 中的事件处理和解析表单
07-02
JS事件表单 JS 中的事件处理和解析表单 我创建了这个项目作为我自己的事件处理和表单解析解决方案。 在我的工作中，我不喜欢有很多事件监听器或大型开关盒。 此外，由于我使用了很多表单，因此我想排除一些逻辑，这些逻辑可以为我提供尽可能干净的数据。 详细说明 script.js 在 script js 中，我在 body 上注册了 2 个事件监听器，点击并提交。 我也可以设置其他侦听器，但出于示例目的，我只使用了这两个。 在 html 内部，我使用 data-event 属性来告诉我哪个事件触发哪个元素的哪个函数。 因此，如果我想侦听某个 span 元素上的 click 事件，它将具有属性 data-event="click:someFunction"。 如果我想在我的元素上有多个动作，我会添加它们，用逗号（，）分隔。 在处理程序内部，我检查要触发的操作是否与发生的事件类型相同，以便可以注册多
【十四】JavaScript之DOM中的事件操作
Chimengmeng的博客
07-04 641
【十四】JavaScript之DOM中的事件操作 【1】事件操作 所谓的事件(Event),其实就是用户与浏览器之间的一次交互过程或交互行为。 例如：用户输入一段内容，用户鼠标晃动一下等等。 js中提供了大量的事件操作给开发者, 在用户发生事件操作以后，进行反馈，响应。 事件类型有很多，但是操作基本都是一样的，只是里面的代码因为事件的不同，而执行的方式，属性不同而已。 【2】...
JavaScript事件监听、常见事件及表单验证
m0_61961937的博客
05-07 2117
JavaScript事件监听及常见事件示例，及简单表单验证示例
js 窗口事件/表单事件
最新发布
qq_73700909的博客
11-17 157
窗口事件是指与浏览器窗口或某个特定元素相关的事件。loadresizescrollunload要绑定这些事件，可以使用方法。下面是一个绑定窗口加载事件的示例：在上面的示例中，当整个网页加载完成时，会在控制台输出"Page loaded!
09JavaScript中的事件（键盘事件、执行多次事件、事件冒泡、事件委派）
weixin_47316183的博客
04-27 504
1、JS事件（1）点击事件：onclick（2）双击事件：ondblclick（3）失去焦点：onblur（4）获得焦点：onfocus（5）鼠标移入：onmouseover（6）鼠标移出：onmouseout（7）鼠标移动：onmousemove（8）窗口尺寸被调整：onresize（9）按下鼠标：onmousedown（10）松开鼠标：onmouseup（11）滚动鼠标滚轮：onmousewh...
JS-表单事件
yixiesuifeng的博客
04-05 992
①onblur(DOM2)：事件会在元素失去焦点时触发。(如：用户离开输入框时执行，经常用于JS验证代码) 浏览器都支持~ 标签都支持，除了那11种： , , , , , , , , , , 和 . 用法：前两种~     function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.
JS:表单事件（7个）
weixin_59519449的博客
10-09 1615
表单事件 属性 描述 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea) oninput 元素获取...
表单事件（JavaScript）
weixin_50053454的博客
02-25 3338
常见的表单事件类型： 1.input输入事件 关注输入过程 var textInput = document.getElementById("myInput") var radios = document.getElementsByName("sex") textInput.oninput = function(){ console.log("input", this.value) } 2.change更新事件 关注输入结果 textInput.oncha
JavaScript常用事件详情
weixin_51669424的博客
11-19 1774
JavaScript常用事件详情
js基础——事件（鼠标事件、键盘事件、表单事件......）
Z_B_L的博客
09-12 171
js基础——事件，本文总结了鼠标事件、键盘事件、表单事件、window事件、焦点事件
javascript表单事件汇总
10-22
javascript表单事件汇总,纯文本格式
js表单事件详细汇总
01-21
javascript表单事件汇总 1。onabort（ns3，ns4，ie4）：当用户终止正在打开的网页时产生该事件。 2。onblur（ns3，ns4，ie3，ie4）：某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就会产生。 3。onchange（ns3，ns4，ie3，ie4）：当网页上某元素的内容发生改变时产生。例如在文本框中输入文本后又在文本框外点击时就会产生。 4。onclick（ns3，ns4，ie3，ie4）单击网页上的某元素时产生 5。ondblclick（ns4，ie4）：双击网页上的元素时产生 6。onerror（ns3，ns4，ie4）：浏览
JavaScript程序设计——事件处理实验报告.docx
11-11
1．实现JavaScript事件注册； 2．实现JavaScript事件处理函数； 3．实现JavaScript鼠标和键盘事件；...4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
初探jquery——表单应用范例
01-19
先来共享几个jquery的资源站Plugins – jQuery JavaScript Library（这里有不少的jquery插件）http://jquery.com/这儿就是jquery的老家了Visual jQuery 1.0 (Automated)jquery的说明文档15 Days Of jQuery...
HTML学习笔记（五）——表单
01-08
过去，需要编写 JavaScript 以增强表单行为——例如，要求访问者提交表单之前必须填写某个字段。HTML5 通过引入新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL 以及定制模式的验证，让这...
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实现HTML界面设计、布局的方法。 实现各种控件的使用方法。 实现对界面项目进行表单验证的方法。 实现表单标记，表单提交方式、编码方式等知识点。
Web前端 | JavaScript（事件）
m0_61933976的博客
10-17 2846
Web前端 | JavaScript（事件）
JS的事件介绍
热门推荐
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
addeventlistener事件参数_【JavaScript 教程】事件——表单事件
05-31
事件参数是指在事件处理函数中自动传递的参数，它包含了事件相关的信息。在JavaScript中，事件参数通常被表示为event对象。 在使用addEventListener方法绑定事件处理函数时，可以通过event参数来获取事件发生的相关信息。例如，在表单事件中，event对象可以包含以下属性： - event.target：指向触发事件的元素。 - event.type：指定触发的事件类型。 - event.preventDefault()：阻止事件的默认行为。 - event.stopPropagation()：停止事件的传播。 除了这些属性外，event对象还可以包含其他与事件相关的信息。开发者可以根据需要使用这些信息来完成各种功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值