JavaScript事件作业

原创 2018-12-08 15:45:50 14
摘要:<!DOCTYPE html> <html> <head> <title>事件作业</title> </head> <body> <script type="text/javascript">     // 
<!DOCTYPE html>
<html>
<head>
	<title>事件作业</title>
</head>
<body>

<script type="text/javascript">
	    //      onfocus 		元素获得焦点。
	     function myfovus(x) {
 			x.style.background="blue"
		 }
		  function myfovus2(y) {
 			y.style.background="red"
		 }
</script>

<!-- onfocus对div无效,无法再div中获取焦点 -->

<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onfocus="myfovus(this)">
	<input type="" name="" onfocus="myfovus2(this)" >
</div>

<script type="text/javascript">
		//	    onblur 		    元素失去焦点。
		 function myonblur(x) {
 		x.style.background="blue"
		 }
		  function myonblur1(y) {
 		y.style.background="red"
		 }
</script>

<!-- onblur对div无效    -->
<!-- onfocus对input生效 -->

<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onblur="myonblur(this)">
	<input type="" name=""  onblur="myonblur1(this)">
</div>

<script type="text/javascript">
		//	    onchange 		域的内容被改变。
		 function myonchange(x) {
 			x.style.background="blue"
 		}
 			 function myonchange1(y) {
 			y.style.background="red"
 		}
</script>

<!-- 当文本域中的更改后,div和input的状态改变 -->

<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onchange="myonchange(this)">
	<input type="" name=""  onchange="myonchange1(this)">
</div>



<script type="text/javascript">
		//	    onclick 		当用户点击某个对象时调用的事件句柄。
		 function myonclick(x) {
 		x.style.background="blue"
 		}
 		function myonclick1(y) {
 		y.style.background="red"
 		}
</script>

<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onclick="myonclick(this)">
	<input type="" name="" onclick="myonclick1(this)">
</div>



<script type="text/javascript">
		//	    ondblclick 		当用户双击某个对象时调用的事件句柄。
		 function myondblclick(x) {
 		x.style.background="blue"
 		}
 		function myondblclick1(y) {
 		y.style.background="red"
 		}
</script>
<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onclick="myondblclick(this)">
	<input type="" name="" onclick="myondblclick1(this)">
</div>

</div>
</body>
</html>


批改老师:Peter-Zhu批改时间:2018-12-08 17:27:50
老师总结:现代网页,全是基于事件驱动的,这与操作系统非常像, 事件很重要也很有意思

发布手记

热门词条