JavaScript事件及应用(表单元素的常用事件)(9.27)_表单元素的5个经典事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_65824274/article/details/127089498

JavaScript中常用的事件

基本的事件模型(事件；事件触发时机)

onblur   元素失去焦点后
onchange   元素值发生改变且已失去焦点后
onclick   鼠标在元素上单击时
ondblclick   鼠标在元素上双击时
onfocus   元素获得焦点
onkeydown   键盘上某个键被按下时
onkeypress   键盘上某个键被按下并且释放时
onkeyup   键盘上某个键被弹起时
onload   对象装载完毕时页面加载
onmousedown   在元素上按下鼠标时
onmousemove   在元素上移动鼠标指针时
onmouscout   鼠标指针移出元素时
onmouseover   鼠标指针移动到元素的上方时
onmouseup   在元素上释放鼠标时
onreset 表单被重置时
onselect 文本内容被选择时
onsubmit   表单被提交时
onunload   对象被卸载时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#div0{
			width: 880px;
			height: 400px;
			background-image:url(img/1.jpg) ;
			background-repeat:no-repeat ;
		}
	</style>
	<body>
		<div class="list">
			<img src="img/1.jpg" width="200" />
			<img src="img/2.jpg" width="200"/>
			<img src="img/3.jpg" width="200"/>
			<img src="img/4.jpg" width="200"/>
			
		</div>
		<div id="div0" style="background-image: url(img/1.jpg);">
			
		</div>
		<script type="text/javascript">
			var imgs =document.querySelectorAll(".list img")
			//console.log(imgs)
			//给每一个img标签绑定一个onmouseover事件：鼠标移入到标签上触发的事件
			for(var i =0;i<imgs.length;i++){
				imgs[i].onmouseover=function(){
					document.getElementById("div0").style.backgroundImage="url("+this.src+")"
				}
			}
		</script>
		
	</body>
</html>

Window对象常用事件
Window 对象常用的事件有 onscroll 事件、onresize 事件、onload 事件，onscroll 事件是指窗口的滚动条被拖动时触发，onresize 事件是指窗口的大小发生改变时触发，onload 事件在浏览器完成对象的装载后立即触发。用得比较多的是 onscroll 事件，上新浪和搜狐这些门户站点，经常会发现页面上除随机漂浮的广告外，还有的广告会随着滚动页面而滚动，页面的左边和页面的右边各有一个，形成对联效果。其实，可以使用 onscroll 事件来实现这个效果。

Document 对象常用事件
Document常用的事件有onkeydown事件和ondrag事件，onkeydown事件是指在文档中按下某个键时触发，ondrag事件是指在文档中进行拖曳操作时持续触发的事件。

表单元素的常用事件

每一个表单元素(对象)都具有基本事件中列出的一到多个事件，在对表单使用事件处理程序时必须根据具体情况，使用最合适的事件。
1.表单对象

属性action表单数据将被提交到的页面；method提交表单的方法，get()方法和post()方法

方法submit()提交表单biao

事件onsubmit表单提交时触发，返回值是false将不提交表单数据

method属性值决定采用get()还是post()方法来提交表单数据，使用post()方法常用于交比较敏感的数据，如密码、账号等，因为数据不像 get()方法一样会以键-值对的方式现在地址栏中，安全性相对高些。onsubmit 事件处理函数可以有返回值，事件处理函数的返回值决定是否提交表单数据，如果 onsubmit 事件处理函数返回true,则表单中的数据将提交到action属性指定的页面。如果返回值是false，将不提交表单数据。

//密码和确认密码格式都必须是由数字、字母、下划线组成，且长度必须在6位以上
			function checkpwd(n){
				//根据id获取文本框内容
				var pwd1 = document.getElementById("pwd1").value
				var pwd2 = document.getElementById("pwd2").value
				//正则表达式判断
				var reg = /^\w{6,}$/
				if(n==1){
					if(reg.test(pwd1)){
						document.getElementById("msg2").innerHTML="密码格式正确"
						return true
					}else{
						document.getElementById("msg2").innerHTML="密码格式不正确"
						return false
					}
				}else{
					if(reg.test(pwd2)){
						document.getElementById("msg3").innerHTML="确认密码格式正确"
						return true
					}else{
						document.getElementById("msg3").innerHTML="确认密码格式不正确"
						return false
					}
				}
			}
			function checkEquals(){
				var pwd1 = document.getElementById("pwd1").value
				var pwd2 = document.getElementById("pwd2").value
				if(checkpwd(2)){
					if(pwd1==pwd2){
						document.getElementById("msg3").innerHTML="密码和确认密码一致"
						return true
					}else{
						document.getElementById("msg3").innerHTML="密码和确认密码不一致"
						return false
					}
				}else{
					return false
				}
			}

2.文本框对象

文本框对象分为单行文本框、密码框和文本域。

文本框对象的常用属性、方法和事件
属性	value	文本框的内容
属性	readonly	文本框的内容不能手动修改，但可以通过程序改变
方法	focus()	使文本框获得焦点
方法	select()	使文本框内容被选中
事件	onblur	光标离开文本框时触发
	onfocus	光标进入文本框时触发
	onchange	文本框的内容已改变且失去焦点时触发

3.按钮对象

按钮对象的常用属性和事件
属性	Value	显示在按钮表面的文字
属性	Disabled	在代码中设置按钮是否能使用，取值 true 或 false
事件	onclick	鼠标单击按钮时触发

4.复选框对象

5.单选按钮对象

复选框(单选按钮)对象的常用属性和事件
属性	checked	获取或设置复选按钮是否被选中:代码中可以通过改变该属性来设置复选框(单选按钮)的状态
属性	value	获取或设置复选框(单选按钮) value属性的值
事件	onblur	失去焦点时触发
	onfocus	获得焦点时触发
	onclick	鼠标单击时触发

<body>
		<p>
			<input type="checkbox" id = "selectAll"/>全选/全不选
			<!-- <input type="checkbox" id = "selectReverse"/>反选  -->
		</p>
		<hr />
		<ul class="shop">
			<li><input type="checkbox" />苹果 </li>
			<li><input type="checkbox" />梨 </li>
			<li><input type="checkbox" />葡萄 </li>
			<li><input type="checkbox" />香蕉</li>
			<li><input type="checkbox" />榴莲 </li>
		</ul>
		<script type="text/javascript">
			var cbs = document.querySelectorAll(".shop input")
			document.getElementById("selectAll").onclick=function (){
				//this:指的是当前对象(触发该事件的标签)
				//consloe.log(this)
				//获取到当前复选框的选中状态
				var isChecked = this.checked
				//consloe.log(isChecked)
				//获取水果列表
				//var cbs = document.querySelectorAll(".shop input")
				for(var i =0;i<cbs.length;i++){
					cbs[i].checked = isChecked
				}	
			}
			//给水果列表中的每一个复选框绑定一个点击事件
			for(var i =0;i<cbs.length;i++){
				//绑定点击事件
				cbs[i].onclick=function(){
					var count =0//用来存储被选中的水果的个数
					for(var j =0;j<cbs.length;j++){
						if(cbs[j].checked){
							count++
						}
					}
					if(count==cbs.length){
						document.getElementById("selectAll").checked=true
					}else{
						document.getElementById("selectAll").checked=false
					}
				}
				
			}
		</script>
</body>