一、添加点击事件
1. 新建demo2.html，并添加如下代码
<!doctype html>
<html>
<head>
<title>我是走马灯啊</title>
<meta charset="utf-8" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="demo2.css"/>
</head>
<body>
<div>
<input type="button" onclick="button1Click()" value="关联事件1"/>
<input type="button" onclick="button2Click()" value="关联事件2"/>
</div>
<div>
<input type="button" onclick="alertDemo()" value="提示对话框"/>
<input type="button" onclick="confirmDemo()" value="确认对话框"/>
</div>
<div>
<input type="button" onclick="startInterval()" value="setInterval()测试"/>
<input type="button" onclick="stopInterval()" value="clearInterval()测试"/>
<input type="button" onclick="startTimeout()" value="setTimeout()测试"/>
<input type="button" onclick="stopTimeout()" value="clearTimeout()测试"/>
</div>
<script type="text/javascript" src="demo2.js"></script>
</body>
</html>
2. 新建demo2.js，并添加如下代码
function button1Click() {
alert("点击Button1");
}
function button2Click() {
alert("点击Button2");
}
/**信息提示框示例*/
function alertDemo() {
alert("我是信息提示对话框");
};
/**确认框示例*/
function confirmDemo() {
if (confirm("你是人类吗")) {
alert("人类老坏了");
} else {
alert("小猪，你好");
}
}
/**interval间隔函数*/
var intervalId;
function startInterval() {
intervalId = setInterval("alert('你妹啊')", 5000);
}
function stopInterval() {
clearInterval(intervalId);
}
/**超时函数*/
var timeoutId;
function startTimeout() {
timeoutId = setTimeout("alert('你妹啊')", 2000);
}
function stopTimeout() {
clearTimeout(timeoutId);
}
/**走马灯效果示例*/
function scroll() {
var title = document.title;
var first = title.charAt(0); //取得第一个字符
var leftStr = title.substring(1, title.length); //取得其余字符
document.title = leftStr + first; //重构文字
}
setInterval("scroll()",500);
3. 点击各个按钮，查看效果
二、代码解析
1. window对象的方法，省去了window.*
alert("我是信息提示对话框");
confirm("你是人类吗")
setInterval("alert('你妹啊')", 5000);
clearInterval(intervalId);
setTimeout("alert('你妹啊')", 2000);
clearTimeout(timeoutId);
interval与timeout的区别见JavaScript浏览器对象之一Window对象
三、onload&onunload&onbeforeunload
1. onload： 网页刚加载完毕时触发
浏览器是一边下载文档，一边解析执行。这样就有可能出现JavaScript想要操作某个元素，而这个元素却还没有加载完成的情况。这样就需要把操作的代码放到body的onload事件中去，或者把相应的代码放到元素之后。
PS： 元素的onload事件是元素加载完成时触发,body的onload事件是body中所有元素加载完成时触发。
2. onunload： 网页关闭（或者离开）后触发
3. onbeforeunload： 在网页准备关闭（或者离开）后触发
注： 未加入w3c标准，但几乎所有浏览器都支持
