HTML基础——DOM事件

1、history

    history.back()返回
    history.forward()前进
    history.go(2)前进再前进

history.go(-2)后退再后退

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- 设置网页每隔1s自动刷新一次 -->
		<meta http-equiv="refresh" content="1" />
		<title></title>
		<script>
			document.write("<center><h2>自动刷新，图片随机显示</h2></center>");
			var i;
			i=Math.floor(Math.random()*9+1);
			//显示一个图片
			document.write("<center><img width='600px' height='400px' src='img/"+i+".jpg'/></center>");
			
		</script>
	</head>
	<body>
		<!-- 
			history.back()返回
			history.forward()前进
			history.go(2)前进再前进
			history.go(-2)后退再后退
			
		-->
		<center><input type="button" id="btn" value="按钮" onclick="history.back();" /></center>
	</body>
</html>

2、鼠标移动事件

onmousedown：鼠标按下时的动作

onmousemove：鼠标移动时的动作

onmouseover：鼠标滑过时的动作

onmouseout：鼠标移出时的动作

onmouseup：鼠标恢复时的动作

ps：onmouseover指的是鼠标在一个标签外（内）移动至该标签内（外），与onmouseout是对应的；而onmousemove指的是鼠标在该标签范围内移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function a(){
				document.getElementById("dog").src="img/dog2.jpg";
			}
			function b(){
				document.getElementById("dog").src="img/dog1.jpg";
			}
			
			
		</script>
	</head>
	<body>
		<!-- out是鼠标挪出去 -->
		<!-- over是鼠标挪进来 -->
		<img id="dog" src="img/dog1.jpg" onmouseout="b();" onmouseover="a();"  />
		低价转让哈士奇弟弟
		<h2>鼠标移过来看看俺啊</h2>
	</body>
</html>

3、定时器

setTimeout（）与setInterval（）

前者只执行一次，后者一直执行

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun() {
				document.getElementById("div").style.left = "" + Math.random() * 500 + "px";
				document.getElementById("div").style.top = "" + Math.random() * 500 + "px";
				setTimeout("fun()", 600);
			}

			setTimeout("fun()", 600);
		</script>
	</head>

	<body>
		<div id="div" style="position: absolute;left: 20px;top:30px;width: 150px;height: 100px;">
			<img src="img/piaofu.jpg" width="150px" height="100px" />

		</div>
	</body>

</html>

4、焦点事件

onblur：失去焦点

onfocus：获取焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证输入</title>
		<script>
			//获取焦点时运行的方法
			function myFocus(){
				var ss=document.getElementById("kh").value;
				if(ss=="格式：10XXXXX"){
					document.getElementById("kh").value="";
				}
			}
			function checkCardNo(){
				var cardNo=document.getElementById("kh").value;
				if(cardNo.substring(0,2)!="10"){
					alert("请注意格式是“10”开头");
					//再次让文本获取焦点
					//document.getElementById("kh").focus();
				}
			}
			
			
		</script>
	</head>
	<body>
		卡号：<input id="kh" 
			type="text" 
			value="格式：10XXXXX" 
			onfocus="myFocus()" 
			onblur="checkCardNo()"/>
		<br />
		密码：<input type="password" />
	</body>
</html>

5、键盘事件

onkeyup：按键松开事件

onkeydown：按键按下时事件

onkeypress：按键按下过程中事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function count(){
				var v=document.getElementById("area").value;
				var sheng=100-v.length;
				if(sheng<0){
					document.getElementById("area").value=v.substring(0,100);
					document.getElementById("span").innerHTML="还剩（"+0+"）个字符";
					return ;
				}
				if(sheng<=10){
					document.getElementById("span").style.color="red";
				}else{
					document.getElementById("span").style.color="#000000";
				}
				
				
				document.getElementById("span").innerHTML="还剩（"+sheng+"）个字符";
				
			
			}
			
		</script>
	</head>
	<body>
		<textarea id="area" rows="5" cols="20" onkeyup="count();"></textarea>
		<span id="span" style="font-size:20px;">还剩（100）个字符</span>
		
	</body>
</html>

6、预加载事件

window.omload=function(){}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//我们写javascript可以直接写出一个标签，里面写javascript
			//dom  domcument 文档对象
			//一个html自身我们看成一个对象
			//html.找到某一个id对应的元素
			//获取元素，整个网页上所有的元素也都是对象，我们称之为“文档对象系统”。
			//还记得innerHTML
			//你可以用代码设置的属性都可以用javascript操作。
			//window对象
			window.onload = function() {
				//var txt=document.getElementById("txt");
				//txt.innerHTML="123";
				var uu=document.getElementById("ul");
				//alert(uu.childNodes.length);
				for (var i=0;i<uu.childNodes.length;i++) {
					//nodeType
					//1-----元素节点
					//2-----属性节点
					//属性节点就是以键值对的形式给元素设置值得节点，
					//通过获取孩子节点是无法获取到它的。
					//3-----文本节点
					if(uu.childNodes[i].nodeType==1){
						uu.childNodes[i].style.background="green";
					}else{
						//这个例子里面的abcd四个文本节点的nodeType是3
						//alert(uu.childNodes[i].nodeValue);
					}
					
				}
				
				//alert(uu.childNodes[1].attributes[0].nodeType);
				//alert(uu.childNodes[1].getAttribute("id"));
				
				//children获取只是元素的部分
				//alert(uu.children.length);
				//alert(uu.children[0].innerHTML);
				
				
				//获取父亲节点用parentNode
				//alert(uu.parentNode.getAttribute("name"));
				
				//得到所有的连接元素节点
				//与getElementById不同getElementsByTagName返回一个数组
				var aas=document.getElementsByTagName("a");
				for (var i=0;i<aas.length;i++) {
					//设置第i个a标签点击之后运行的方法
					aas[i].onclick=function(){
						//this指的是这个a本身
						//this.parentNode就是li
						//我们把li的display设置为none
						this.parentNode.style.display="none";
					};
				}
				
				//添加节点
				var div2=document.getElementById("div2");
				
				//常见一个节点
				var img=document.createElement("img");
				img.src="img/9.jpg";
				img.width=80;
				img.height=80;
				//从所有孩子的末尾处添加img作为div2的孩子。
				div2.appendChild(img);
				
				
				//删除节点
				var u2=document.getElementById("u2");
				u2.removeChild(u2.children[0]);
				
				//获得兄弟节点
				//previousElementSibling获取前驱
				alert(u2.previousElementSibling.children[0].getAttribute("id"));
				//nextElementSibling获取元素的后继
				alert(ul.nextElementSibling.children[0].getAttribute("id"));
				
			};
		</script>
	</head>

	<body name="abc">
		<ul id="ul">a
			<li id="t">高宁<a>张楚岚</a></li>b
			<li>夏禾<a>冯宝宝</a></li>c
			<li>胡杰<a>老天师</a></li>d
		</ul>
		
		<div>
			<div id="div2"></div>
		</div>
		<ul id="u2">
			<li>哈哈</li>
			<li>嘿嘿</li>
			<li>嘻嘻</li>
		</ul>
	</body>

</html>