js之事件编程

Camellia——

已于 2022-09-03 18:49:54 修改

阅读量226

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2022-09-03 09:20:41 首次发布

本文链接：https://blog.csdn.net/weixin_57219176/article/details/126673595

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

js事件编程三要素：
           1）事件源：html标签
           2）事件监听：定义一个函数
           3）注册事件监听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件编程的分类</title>
		<!--
					常用的：
						和点击相关的事件
							单击点击  -- 属性名称:onclick
							双击点击--- ondbclick
							
						和焦点相关的事件
							获取焦点     onfocus
							失去焦点     onblur
						
						和选项卡发生变化相关的事件:onchange  
								省市联动效果(原生js完成)
						
						和页面载入相关的事件 onload  ,在body中使用
						将body中的内容加载完会触发该事件!
						
						鼠标经过事件:onmouseover
						鼠标移出事件:onmouseout
						
						...
					
				-->
				
	</head>
	<body>
		<input type="button" value="单击" onclick="testClick()"/><br />
		<input type="button" value="双击" ondblclick="testDbClick()"/><br />
		<input type="text" value="请输入用户名" id="username" onfocus="testFocus()" onblur="testBlur()" /><span id="tip"></span><br />
		籍贯：
		<select id="jiguan" onchange="testChange()">
			<option value="请选择">请选择</option>
			<option value="陕西省">陕西省</option>
			<option value="山西省">山西省</option>
			<option value="广东省">广东省</option>
		</select>
		<select id="city">
			<!--设置select标签对象innerHTML = "<option value="西安市">西安市</option>"
				-->
		</select>
	</body>
	<script>
		function testClick(){
			alert("触发了单击点击事件");
		}
		function testDbClick(){
			alert("触发了双击点击事件");
		}
		function testFocus(){
			//获取id="username"所在的input标签对象
			var input=document.getElementById("username");
			//设置input标签对象的value属性
			input.value="";
		}
		function testBlur(){
				//获取input标签对象同时获取文本输入框的内容
				var username = document.getElementById("username").value ;
				//获取id="tip"所在的span标签对象
				var span = document.getElementById("tip") ;
				//判断
				if(username == "tom"){
					//设置span它的innerHTML属性
					span.innerHTML="用户名不可用".fontcolor("red") ;
				}else{
					span.innerHTML= "用户名可用".fontcolor("green") ;
				}
			}
		function testChange(){
			//获取id="jiguan"所在的select标签对象并且获取选择的内容
			var jiguan=document.getElementById("jiguan").value;
			//获取id="city"所在的select标签对象
			
			var city=document.getElementById("city");
			city.innerHTML="";
			if(jiguan=="陕西省"){
				var arr=["西安","铜川","榆林","商洛"];
				for(var i=0;i<arr.length;i++){
					//获取每一个arr[i]
					//设置id="city"的select标签对象innerHTML = "<option value="西安市">西安市</option>"
					city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
				}
			}
			if(jiguan=="山西省"){
				var arr= ["太原市","大同市","晋中市","运城市"] ;
				for(var i=0;i<arr.length;i++){
					//获取每一个arr[i]
					//设置id="city"的select标签对象innerHTML = "<option value="西安市">西安市</option>"
					city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
				}
			}
			if(jiguan=="广东省"){
				var arr=["深圳市","东莞市","惠州市","中山市"] ;
				for(var i=0;i<arr.length;i++){
					//获取每一个arr[i]
					//设置id="city"的select标签对象innerHTML = "<option value="西安市">西安市</option>"
					city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
				}
			}
		}
	</script>
</html>