【JavaWeb】第三章 JavaScript事件

爱被打了一巴掌 2023-10-08 17:09 1阅读 0赞

#### 文章目录 ####

*  1、事件介绍
 *  2、事件的注册
 *  3、onload加载完成事件
 *  4、onclick单击事件
 *  5、onblur失去焦点事件
 *  6、onchange内容发生改变事件
 *  7、onsubmit表单提交事件

## 1、事件介绍 ##

事件是电脑输入设备与页面进行交互的响应。常见的事件有：

*  **onload加载完成事件**  
    页面加载完成之后，常用于做页面JS代码初始化操作
 *  **onclick单击事件**  
    常用于按钮的点击响应
 *  **onblur失去焦点事件**  
    常用于输入框失去焦点后验证其输入内容是否合法
 *  **onchange内容发生改变事件**  
    常用于下拉列表和输入框内容发生改变后操作
 *  **onsubmit表单提交事件**  
    常用于表单提交前，验证所有表单项是否合法

## 2、事件的注册 ##

事件的注册（事件的绑定）就是告诉浏览器，当事件响应后要执行哪些操作代码。事件的注册有两种方式：

*  **静态注册**  
    通过html标签的事件属性直接赋予事件响应后的代码，称静态注册
 *  **动态注册**  
    指先通过js代码得到标签的dom对象，然后再通过dom对象 . 事件名=function()\{\}这种形式赋予事件响应后的代码，称动态注册。

动态注册的步骤：
    
    - 获取标签对象
    - 标签对象.事件名=function(){
        }

## 3、onload加载完成事件 ##

onload事件是浏览器解析完页面之后就会自动触发的事件

> **静态注册写法**

**//方式：body标签加onload属性**

.....
    <body onload="alert('静态注册online事件触发')">
    .....
    </body>

运行效果：  
![在这里插入图片描述][ae3171934f9e4f80ad26594a1d04291b.png]

当onload时要执行的代码不止一句时，可在<script>中先定义一个onload事件的方法：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		//定义onload事件的方法
    		function onloadFun(){
        
    			alert('这里是静态注册onload事件的所有代码');
    		}
    	</script>
    </head>
    
    //在body标签的onload属性中直接调用方法
    <body onload="onloadFun();">
    </body>
    </html>

运行效果：  
![在这里插入图片描述][408f171ed55e43c2bcb59d540eaa738d.png]

> **动态注册写法**

**// 方式：window.οnlοad=function()\{\}**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		//定义方法的格式window.οnlοad= function(){}
    		window.onload = function(){
        
    			alert("动态注册onload事件");
    		}
    		
    	</script>
    </head>
    
    
    <body>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][d8ca4a07bb6347669a0bcd90bb86f890.png]

## 4、onclick单击事件 ##

> **静态注册写法**

**// 方式：在button标签中加onclick属性**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		//定义oncick方法
    		function onclickFun(){
        
    			alert("静态注册onclick事件");
    		}
    	</script>
    </head>
    <body>
    	
    	<button onclick="onclickFun();">按钮1</button>
    	<button>按钮2</button>
    </body>
    </html>

运行效果：

![在这里插入图片描述][7d15307594204120a2aff7021fa9c968.png]

> **动态注册写法**

**// 方式：**

*  window.onload = function()\{
 *  获取标签对象
 *  通过标签对象.时间名 = function()\{\}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		//window.onload
    		window.onload = function(){
        
    			//document是JS语言提供的一个对象（表示整个页面文档）
    			//getElementById方法即通过标签的id属性获取标签对象
    			var btnObj = document.getElementById("btn01");
    			//标签对象.事件名=function(){}
    			btnObj.onclick = function(){
        
    				alert("动态注册onclick事件代码");
    			}
    		}
    	</script>
    </head>
    <body>
    	
    	<button id="btn01">按钮</button>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][e7b21920590a45c09183a50514ba597e.png]  
关于其中的对象btnObj，可以alert一下看看：  
![在这里插入图片描述][432c331ed5c74b399788533aed61a1bc.png]

## 5、onblur失去焦点事件 ##

onblur事件常用于输入框失去焦点以后验证其输入内容是否合法

> **静态注册写法**

**// 方式：对应标签中加入onblur属性**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		function onblurFun(){
        
    			//console是控制台对象，是由JS语言提供的专门用来向浏览器的控制器打印输出，作测试使用
    			//log()是打印的方法
    			console.log("静态注册失去焦点事件的code");
    		}
    	</script>
    </head>
    <body>
    	用户名：<input type="text" onblur="onblurFun();"><br/>
    	密码：<input type="text"><br/>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][fa8d3d90c785480585ad3059426a49cc.png]

> **动态注册写法**

**// 方式：**

*  window.onload = function()\{
 *  获取标签对象
 *  通过标签对象.时间名 = function()\{\}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		function onblurFun(){
        
    			console.log("静态注册失去焦点事件的code");
    		}
    		
    		//动态注册失去焦点事件
    		window.onload = function(){
        
    			var passwordObj = document.getElementById("password");
    			passwordObj.onblur = function(){
        
    				console.log("动态注册失去焦点事件");
    			}
    		}
    	</script>
    </head>
    <body>
    	用户名：<input type="text" onblur="onblurFun();"><br/>
    	
    	密码：<input type="text" id="password"><br/>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][67c84cb9a48e4284b5a3413b39106395.png]

## 6、onchange内容发生改变事件 ##

onchange事件常用于下拉列表和输入框内容发生改变后操作

> **静态注册写法**

**// 方式：对应标签中加入onchange属性**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		function onchangeFun(){
        
    			alert("答案修改成功！");
    		}
    	</script>
    </head>
    <body>
    	请选择正确的答案：
    	<select onchange="onchangeFun();">
    		<option>A</option>
    		<option>B</option>
    		<option>C</option>
    		<option>D</option>
    	</select>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][30f9a6bc92bc425e8d282eac0d790a68.png]

> **动态注册写法**

**// 方式：**

*  window.onload = function()\{
 *  获取标签对象
 *  通过标签对象.时间名 = function()\{\}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript">
    		window.onload = function(){
        
    			var selectObj = document.getElementById("select");
    			selectObj.onchange = function(){
        
    				alert("动态注册onchange");
    			}
    		}
    	</script>
    </head>
    <body>
    	请选择正确的答案：
    	<select id="select">
    		<option>A</option>
    		<option>B</option>
    		<option>C</option>
    		<option>D</option>
    	</select>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][5dd478d4b94249b29f473858852f34b9.png]

## 7、onsubmit表单提交事件 ##

onsubmit事件常用于在表单提交前，验证所有表单项是否合法

> **静态注册写法**

**// 方式：对应标签中加入onsubmit属性**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            function onsubmitFun(){
        
                alert("onsubmit静态注册code");
                //这里应该验证提交的表单信息是否合法
                //不合法就阻止表单提交(这里不加判断，直接返回个false做测试)
                return false
            }
        </script>
    </head>
    <body>
      
      
      <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
          <input type="submit" value="静态注册"/>
      </form>
    </body>
    </html>

> **动态注册写法**

**// 方式：**

*  window.onload = function()\{
 *  获取标签对象
 *  通过标签对象.时间名 = function()\{\}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html><!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script type="text/javascript">
        window.onload = function(){
        
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function(){
        
                alert("onsubmit动态注册code");
                //阻止提交
                return false;
            }
        }
      </script>
    </head>
    <body>
    <form action="http://localhost:8080" method="get" id="form01">
      <input type="submit" value="动态注册"/>
    </form>
    </body>
    </html>

运行效果：  
![在这里插入图片描述][1c3a2e72a3604ced9f3908cf1cce60bb.png]

[ae3171934f9e4f80ad26594a1d04291b.png]: https://img-blog.csdnimg.cn/ae3171934f9e4f80ad26594a1d04291b.png
[408f171ed55e43c2bcb59d540eaa738d.png]: https://img-blog.csdnimg.cn/408f171ed55e43c2bcb59d540eaa738d.png
[d8ca4a07bb6347669a0bcd90bb86f890.png]: https://img-blog.csdnimg.cn/d8ca4a07bb6347669a0bcd90bb86f890.png
[7d15307594204120a2aff7021fa9c968.png]: https://img-blog.csdnimg.cn/7d15307594204120a2aff7021fa9c968.png
[e7b21920590a45c09183a50514ba597e.png]: https://img-blog.csdnimg.cn/e7b21920590a45c09183a50514ba597e.png
[432c331ed5c74b399788533aed61a1bc.png]: https://img-blog.csdnimg.cn/432c331ed5c74b399788533aed61a1bc.png
[fa8d3d90c785480585ad3059426a49cc.png]: https://img-blog.csdnimg.cn/fa8d3d90c785480585ad3059426a49cc.png
[67c84cb9a48e4284b5a3413b39106395.png]: https://img-blog.csdnimg.cn/67c84cb9a48e4284b5a3413b39106395.png
[30f9a6bc92bc425e8d282eac0d790a68.png]: https://img-blog.csdnimg.cn/30f9a6bc92bc425e8d282eac0d790a68.png
[5dd478d4b94249b29f473858852f34b9.png]: https://img-blog.csdnimg.cn/5dd478d4b94249b29f473858852f34b9.png
[1c3a2e72a3604ced9f3908cf1cce60bb.png]: https://img-blog.csdnimg.cn/1c3a2e72a3604ced9f3908cf1cce60bb.png