一、onload事件： 页面加载完成后，自动触发的操作，常用于js代码初始化操作
1、静态写法
写法一：直接在html元素标签里面写
<body οnlοad="alert('静态注册onload事件')"> <!--一般只有一句代码才直接在onload后面写代码 -->
...........
</body>
写法二： 写在<head>元素之间, 多代码语句写法
<head>
............
<script type="text/javascript"> function fun() { alert("静态注册onload事件"); }
</head>
<body οnlοad="fun()"> <!--如果有多句代码，可定义成一个函数来完成-->
...........
</body>
2、onload事件动态注册
<head>
............
window.οnlοad=function(){ <!--onload本身是window对象的方法，所以直接window.事件名=function(){}完成动态注册-->
alert("动态注册onload事件");
</head>
<body>
...........
</body>
二、onlclick事件：单击事件 常用于按钮
1、静态写法 //跟前面onload一样的，就是把onload改成onclick
<script type="text/javascript"> function Onclickfun(){ alert("静态函数注册"); } </script>
<button οnclick="Onclickfun()">按钮1</button>
2、☆动态写法
回忆动态写法：
先通过JS代码获得标签的dom对象，然后再通过dom对象.事件名=function(){},这种形式赋予事件响应后的代码，叫做动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = function(){}
exp:
<script type="text/javascript"> window.οnlοad=function(){ //套路，所有动态注册，都先写这个 var btnobj = document.getElementById("btn02"); //1、定义一个对象btnobj 同时获取标签对象
/* document是JS提供的一个对象，指整个页面（文档）
get 获取；element 元素（就是指标签）；byID 通过ID属性 */
btnobj.οnclick=function(){ //2、标签对象.事件名 = function(){}
alert("动态注册onclick"事件");} } </script>
<button id="btn02">按钮2</button>
三、onblur事件：失去焦点事件 常用于输入框，失去焦点后，验证输入内容是否合法。
焦点：文本框的边框就像舞台，框内一闪一闪的光标就是焦点
1、静态注册写法
<script type="text/javascript"> function onblurfun() { console.log("静态失去焦点事件"); //console,JS提供的控制台对象，专门用于向浏览器打印输出，用于测试使用 } //log() ,打印方法 </script>
<body> 姓名：<input type="text" οnblur="onblurfun()"><br> </body>
2、动态注册写法
<script type="text/javascript"> window.οnlοad=function () { //动态套路 var passwordobj=document.getElementById("pass"); //1、定义一个对象passwordobj 同时获取标签对象 passwordobj.οnblur=function () { alert("动态失去焦点事件"); } //2、标签对象.事件名 = function(){}
} </script>
<body> 密码：<input type="password" id="pass"><br> </body>
三、onchange 内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
1、静态注册 onchange事件
<script type="text/javascript"> function onchangefun(){ //定义改变时发生的事件 alert("她真的很美");} </script>
<body>
<select οnchange="onchangefun()"> <option>女神</option> <option>仓木麻衣</option> <option>吉泽明步</option> </body>
2、动态注册onchange事件
<script type="text/javascript"> window.οnlοad=function () { //动态套路 var beautyobj=document.getElementById("sel01"); //1、定义一个对象beautyobj 同时获取标签对象 beautyobj.οnblur=function () { alert("她真的很美"); } //2、标签对象.事件名 = function(){}
} </script>
<body>
<select id="sel01"> <option>女神</option> <option>仓木麻衣</option> <option>吉泽明步</option> </body>
四、表单提交事件 onsubmit 用于表单提交前，验证所有表单是否合法，可阻止表单提交。
如果要阻止表单提交，需要在html form标签里面 onsubmit事件设置 return false，如果没有return false，可以报警告，但不阻止表单提交。
静态注册onsubmit事件：
<script type="text/javascript"> function onsumitfun() { alert("静态阻止表单提交"); return false; } </script>
<body> <form action="localhost:8080" method="get" οnsubmit="return onsumitfun()"> //onsumitfun()会返回false，连一起 return false 用户名：<input type="text" value="默认值"/><br/> 密码：<input type="password"/><br/> </form> </body>
动态注册onsubmit事件：
<script type="text/javascript"> window.οnlοad=function () { //动态套路 var formobj=document.getElementById("form01"); //1、定义一个对象formobj 同时获取标签对象 formobj.οnblur=function () { alert("动态阻止表单提交"); } //2、标签对象.事件名 = function(){}
return false; //如果要阻止表单提交，一定要有return false
} </script>
<body> <form action="localhost:8080" method="get" id="form01"> 用户名：<input type="text" value="默认值"/><br/> 密码：<input type="password"/><br/> </form> </body>
