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>