笔记--事件

最新推荐文章于 2024-01-11 23:52:09 发布

Vridis_h

最新推荐文章于 2024-01-11 23:52:09 发布

阅读量257

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/Vridis_h/article/details/77864222

版权

java 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

有一次笔试，叫写JavaScript的事件，因为之前没系统的学过，所以只写了一个点击事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="text" id="nameId" οnmοusemοve="run()" οnmοuseοut="run2()"/>
	</br>
	<input type="text" id="nameId2" οnkeyup="run3()" style="width:200px"/>
	<div id="divId" style="width:200px;display:none">	
		<table>
			<tr>
				<td>java</td>
			</tr>
			<tr>
				<td>js</td>
			</tr>
			<tr>
				<td>jsp</td>
			</tr>
		</table>
	</div>

</body>
<script type="text/javascript">
	/*
		*事件
			*鼠标移动事件
				*onmousemove
				*onmouseout
				*onmouseover
			*鼠标点击事件（*********）
				*onclick 点击
				*ondblclick 双击
			*加载和卸载
				*onload（*********） 加载
				*onunload            卸载
			*获取焦点和失去焦点
				*onfocus  获取焦点
				*onblur   失去焦点
			*键盘事件
				*onkeyup 按下抬起
			*控制表单提交（*********）
			*改变事件
				*onchange
	*/
	//鼠标悬停
	function run()
	{
		var input = document.getElementById("nameId");
		input.style.backgroundColor="gray";
	}
	function run2()
	{
		var input = document.getElementById("nameId");
		input.style.backgroundColor="red";
	}
	//输入完东西之后，就会弹出对应的东西
	function run3()
	{
		var div = document.getElementById("divId");
		div.style.display="block";
	}
</script>
</html>
事件并不难，难在要记得并熟练运用。

有一个省市联动的练习，我坐到最后，就是不能实现，对照视频的代码看了很多遍，没发现差别，自己理了下思路，也没问题，找不到问题在哪儿，下次复习的时候再看看吧。说这个又让我想起我之前留下的问题，但是忘了是把一部分的内容了，有时间把之前的好好复习下。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<select id="select1" οnchange="run(this.value)">
		<option>--请选择</option>
		<option value="北京">北京</option>
		<option value="河北">河北</option>
		<option value="四川">四川</option>
		<option value="河南">河南</option>
	</select>
	<select id="select2">
	</select>
</body>
<script type="text/javascript">
	/*
		*思路：通过传过来的值，和数组对比，获取数组后面的值（从1开始），添加到select2中去
		       即在第一个select中，选中自己的省，把那个值传给函数，根据传过来的值判断后面那个select需要放入哪一个省的城市。
		
		*事件：改变事件：
			*onchange
			*通过改变事件把value传过来。
		*去数组中获取值，和传过来的值进行对比，如果匹配，获取该后面的值
		*添加到select2中去
	*/
	var arr=[];
	arr[0]=new Array("北京","海淀","昌平","朝阳","丰台","东城");
	arr[1]=new Array("河北","石家庄","邯郸","秦皇岛","张家口","唐山");
	arr[2]=new Array("河南","郑州","洛阳","南阳","开封","商丘","驻马店");
	arr[3]=new Array("四川","成都","泸州","隆昌","资阳","内江","宜宾","自贡");
	
	function run(val)
	{		
		//alert(val);
		//获取select2对象
		var select2=document.getElementById("select2");
		//先清除掉select2下面的所有子节点，如果不清除，每次选不同的省会，会在之前的城市上进行累加
		//先获取select2下的所有子节点
		var ops=select2.getElementsByTagName("option");
		//循环遍历
		for(var x=0;x<ops.length;x++)
		{
			var op=ops[x];
			//删除节点
			select2.removeChild(op);
			x--;
		}
		
		//获取数组里面的内容
		for(var i=o;i<arr.length;i++)
		{
			var inarr=arr[i];
			//获取数组0位置的元素
			var str=inarr[0];
			//alert(str);
			//判断传过来的值和数组的值是否相等
			if(val == str)
			{
				//获取数组后面的内容
				for(var j=1;j<inarr.length;j++)
				{	
					//除了0位置后的所有元素
					var instr=inarr[j];
					//添加到select2中去
					//创建文本对象
					var option=document.createElement("option");
					//创建文本对象
					var text=document.createTextNode(instr);
					//把文本添加到元素下面
					option.appendChild(text);
					//把元素添加到select2下面去
					select2.appendChild(option);
				}
			}
		}
	}	
</script>
</html>

之前没有做这么详细注释的习惯，以后还是这样做吧，好复习。

Vridis_h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记--事件

有一次笔试，叫写JavaScript的事件，因为之前没系统的学过，所以只写了一个点击事件。Insert title here java js jsp /* *事件 *鼠标移动事件 *onmousemove *onmouseout *on
复制链接

扫一扫