js事件的一些例子探讨

最新推荐文章于 2023-12-28 14:41:37 发布

AndroidDev2022

最新推荐文章于 2023-12-28 14:41:37 发布

阅读量1.3k

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/jdfkldjlkjdl/article/details/9953135

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.页面加载事件

先看一段js代码：

<!DOCTYPE html>
<html>
<head>
<title>event.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
//第一段js
<script>
	window.onload = function() {//类似于匿名函数
		alert("页面加载事件1");
	}();
</script>

//第二段js
<script>
	function a() {
		alert("页面加载事件2");
	}
	window.onload = a();//此时调用方法需要写括号
</script>
//第三段js
<script>
	var a = function() {//函数变量
		alert("页面加载事件3");
		var button = document.getElementById("button1");
		button.onclick = method;
	}
	window.onload = a;//此时调用的时候不写括号
</script>
//第四段js
<script type="text/javascript">
	function method() {
		alert("点击之后才出现----页面加载事件4");
	}
</script>
</head>

<body>
	event事件
	<br>
	<input type="button" value="按钮点击事件" id="button1">


</body>
</html>

按照以上代码的写法，执行顺序如下：页面加载事件1、页面加载事件2、页面加载事件3依次弹框,点击按钮后，页面加载事件4弹框.如果单独只想第一段js(去掉其他三段js代码),则第一段js的代码另外一种写法为：

<script>
	window.onload = function() {//类似于匿名函数
		alert("页面加载事件1");
	};
</script>

当以上几种方法混合写在一起时，由于onload机制(onload事件在页面加载的时候先执行onload里面的函数代码，其他事件要在触发的时候执行相关代码。代码运行按照网页上出现的顺序（方法调用不按这个顺序）。)第一段js不会被执行。本人亲测，在大括号后加上()后可以执行。
执行顺序截图：

此时点击按钮出现

2.切换图片的两种方式(点击、悬停、自动切换)

点击切换和悬停切换

<!DOCTYPE html>
<html>
<head>
<title>event1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">
 var i = 0;
 
 window.onload = function() {
 //绑定按钮事件--需定义在onload里面,否则无效
  var button1 = document.getElementById("button1");
  var img1 = document.getElementById("img1");
  var array = new Array("1.jpg", "2.jpg", "3.jpg","4.jpg");
  button1.onclick = function() {
   //alert("点击之后才出现----页面加载事件4");

   if (i == array.length) {
    i = 0;
   }
   img1.src = array[i];
   i++;
  };
        //定义onmouseover和onmouseout属性
  img1.onmouseout = function() {
   img1.src = "2.jpg";
  };
  img1.onmouseover = function() {
   img1.src = "4.jpg";
  };
 };
</script>

</head>

<body>
 <img id="img1" src="1.jpg" />
 <input type="button" value="按钮点击事件" id="button1">
</body>
</html>

关于悬停切换的另外一种写法：

<!DOCTYPE html>
<html>
<head>
<title>event3.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<img src="1.jpg" id="img1" οnmοuseοver="a();" οnmοuseοut="b();" />
<script type="text/javascript">
	var img1 = document.getElementById("img1");
	function a() {

		//alert("aaa");
		//document.bgColor="red";
		img1.src = "2.jpg";
	}
	function b() {
		//alert("bb");
		//document.bgColor="yellow";
		img1.src = "3.jpg";
	}
</script>
<body>
	图片悬停切换
	<br> 这种写法要注意img的位置，当img放置在<script></script>标签之后时，没有图片切换效果。当放在之前时有此效果
</body>
</html>

此时应该注意<img>标签放置的位置。经本人测试，此种写法<img>标签需放在<script>前面才能达到切换效果,放在body之间是不行的。

自动切换setInterval(check,1000);

<!DOCTYPE html>
<html>
<head>
<title>event2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>
<body>
	<script type="text/javascript">
		var i = 0;//注意要放在外面定义

		var array = new Array("red", "yellow", "blue");
		function check() {
			if (i == array.length) {
				i = 0;
			}
			document.bgColor = array[i];
			i++;
		}
		timer = setInterval(check, 1000);
	</script>

	<input type="button" value="按钮点击事件" οnclick="check()">
</body>
</html>