<!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function demo() { alert("hello"); } function onOver(ooj) { ooj.innerHTML = "鼠标移入显示"; } function onOut(ooj) { ooj.innerHTML = "鼠标移出显示"; } function changeDemo(bg) { alert("内容改变了啊") } function changeDemo1(bg) { bg.style.background = "red"; } function changeDemo2(bg) { bg.style.background = "blue"; } function mgs() { alert("内容加载完毕") } function bu(bg) { var b = bg.value; alert("鼠标移开事件(您输入的是)" + b); } function ud() { alert("您关闭了网页") } </script> <style> .div { width: 100px; height: 100px; background-color: cadetblue; } </style> </head> <body onload="mgs()" onunload="ud()"> <!--网页加载完毕事件,网页关闭事件(关闭后执行看不见)--> <button onclick="demo()">按钮</button> <!--单机事件--> <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)">开始显示</div> <form> <input type="text" onchange="changeDemo(this)"/> <!--文本内容改变事件--> <input type="text" onselect="changeDemo1(this)" onfocus="changeDemo2(this)"/> <!--文本内容选中事件--> <!--鼠标聚集(选中)事件--> <input type="text" onblur="bu(this)"/> <!--移开光标事件事件--> </form> </body> </html>