目录
【JavaScript】JavaScript基础（三）
3. ECMAScipt(续)
j. JS中的事件
①常用的事件
- onload加载完成事件：页面加载完成之后，常用于做页面js代码初始化操作
- onclick单击事件：常用于按钮的点击响应操作。
- onblur失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
- onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。
②事件的注册
事件的注册又分为静态注册和动态注册两种。
- 什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。 - 静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
- 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function()这种形式赋于事件响应后的代码，叫动态注册。
- 动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名=function(){ }
- 动态注册基本步骤：
③onload加载完成事件
-
静态注册onload事件
<script type="text/javascript"> function onloadFunc() { alert('静态注册onload事件'); alert('2444'); } </script><body onload="onloadFunc()"> -
动态注册onload事件
<script type="text/javascript"> window.onload = function(){ alert('静态注册onload事件'); alert('2555'); } </script>
④onclick单机事件
-
静态注册onclick事件
<script type="text/javascript"> function onclickFunc() { alert('静态注册onclick事件'); alert('2444'); } </script><body> <button onclick="onclickFunc()">按钮1</button> </body> -
动态注册onclick事件
<script type="text/javascript"> window.onload = function() { var btnObj = document.getElementById("btn02"); btnObj.onclick = function() { alert('动态注册onclick事件'); alert('2555'); } } </script><body> <button id="btn02">按钮2</button> </body>*document获取该页面所有元素对象
⑤onblur失去焦点事件
-
静态注册onblur事件
<script type="text/javascript"> function onblurFunc() { console.log("静态注册失去焦点事件"); } </script><body> 用户名:<input type="text" onblur="onblurFunc();"> </body> -
动态注册onblur事件
<script type="text/javascript"> window.onload = function() { var nameObj = document.getElementById("name"); nameObj.onblur = function() { console.log('动态注册失去焦点事件'); } } </script><body> 用户名:<input type="text" id="name"> </body>*
console.log()控制台打印信息。
⑥onchange内容发生改变事件
-
静态注册onchange事件
<script type="text/javascript"> function onchangeFunc() { alert("数字改变了"); } </script><body> <select onchange="onchangeFunc();">选一个数字 <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </body> -
动态注册onchange事件
<script type="text/javascript"> window.onload = function() { var selObj = document.getElementById("sel"); selObj.onchange = function() { alert('数字也改变了'); } } </script><select id="sel">
⑦onsubmit表单提交事件
-
静态注册onsubmit事件
（例子：内容不合法，阻止表单提交）
<script type="text/javascript"> function onsubmitFunc() { alert("静态注册表单提交事件————发现不合法"); return false; } </script><body> <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFunc();"> <input type="submit" value="静态注册"/> </form> </body> -
动态注册onsubmit事件
<script type="text/javascript"> window.onload = function() { var formObj = document.getElementById("form02"); formObj.onsubmit = function() { alert('动态注册表单提交事件————发现不合法'); return false; } } </script><body> <form action="http://localhost:8080" method="get" id="form02"> <input type="submit" value="动态注册"/> </form> </body>