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>