onload相关事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script >
function my$(id){
return document.getElementById(id);
}
</script>
<script>
//页面加载的时候,按钮还没出现,页面没有加载完毕
//页面加载完毕了,再获取按钮
//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
window.onload=function () {
document.getElementById("btn").onclick=function () {
alert("您好");
};
};
//很重要
// onload=function () {
// document.getElementById("btn").onclick=function () {
// alert("您好");
// };
// };
//扩展的事件---页面关闭后才触发的事件
// window.onunload=function () {
//
// };
//扩展事件---页面关闭之前触发的
// window.onbeforeunload=function () {
// alert("哈哈");
// };
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>
location相关的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//对象中的属性和方法
//location对象
//console.log(window.location);
// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);
onload=function () {
document.getElementById("btn").onclick=function () {
//设置跳转的页面的地址
//location.href="http://www.jd.com";//属性----------------->必须记住
//location.assign("http://www.jd.com");//方法
//location.reload();//重新加载--刷新
//location.replace("http://www.jd.com");//没有历史记录
};
};
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>
history相关的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script >
function my$(id){
return document.getElementById(id);
}
</script>
<script>
//跳转的
my$("btn1").onclick = function () {
window.location.href = "www.baidu.com";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
</script>
</body>
</html>