[JavaScript] 第五章函数、事件处理、作用域

超、凢脫俗 2024-04-23 21:03 70阅读 0赞

春花秋月何时了，往事知多少。此付费专栏不要订阅，不要订阅，听人劝。

> ?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?  
> ?简历模板、学习资料、面试题库、技术互助
> 
> ?文末获取联系方式 ?  
> ![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

## 系列专栏目录 ##

[\[Java项目实战\] 介绍Java组件安装、使用；手写框架等][Java_ _Java]  
[\[Aws服务器实战\] Aws Linux服务器上操作nginx、git、JDK、Vue等][Aws_ Aws Linux_nginx_git_JDK_Vue]  
[\[Java微服务实战\] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 ][Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]  
[\[Java基础篇\] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 ][Java_ Java_HashMap_String_StringBuffer_JVM_]  
[\[Springboot篇\] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 ][Springboot_ _Springboot_RestFul_Swagger_]  
[\[Spring MVC篇\] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 ][Spring MVC_ _Spring MVC_RestFul_]  
[\[华为云服务器实战\] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 ][_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]  
[\[Java爬虫\] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 ][Java_ _Java_Selenium_GoogleWebDriver _bing_]  
[\[Vue实战\] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 ][Vue_ _Vue3_axios_Element-ui_]  
[\[Spring\] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 ][Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]

--------------------

## 前言 ##

本章介绍JavaScript的函数、事件处理、作用域等。

--------------------

## 1、函数 ##

函数是一组执行特定任务（具有特定功能）的，可以重复使用的代码块

function functionName(parameter_list) {
        
    	// 函数中的代码
    }

function sayHello(name){
        
    	document.write("Hello " + name);
    }

// 调用 sayHello() 函数
    sayHello('清华大学');
    function sayHello(name = "World"){
        
    	document.write("Hello " + name);
    }
    
    sayHello();                 // 输出：Hello World
    sayHello('qh.com');     // 输出：Hello qh.com

### 函数表达式 ###

var myfunction = function name(parameter_list){
        
    	// 函数中的代码
    };

## 2、事件（event）处理 ##

JS 事件（event）是当用户与网页进行交互时发生的事情

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>鼠标、键盘事件</td> 
   <td>onclick</td> 
   <td>点击鼠标时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>ondblclick</td> 
   <td>双击鼠标时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onmousedown</td> 
   <td>按下鼠标时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onmouseup</td> 
   <td>鼠标按下后又松开时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onmouseover</td> 
   <td>当鼠标移动到某个元素上方时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onmousemove</td> 
   <td>移动鼠标时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onmouseout</td> 
   <td>当鼠标离开某个元素范围时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onkeypress</td> 
   <td>当按下并松开键盘上的某个键时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onkeydown</td> 
   <td>当按下键盘上的某个按键时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onkeyup</td> 
   <td>当放开键盘上的某个按键时触发此事件</td> 
  </tr> 
  <tr> 
   <td>窗口事件</td> 
   <td>onabort</td> 
   <td>图片在下载过程中被用户中断时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onbeforeunload</td> 
   <td>当前页面的内容将要被改变时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onerror</td> 
   <td>出现错误时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onload</td> 
   <td>页面内容加载完成时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onmove</td> 
   <td>当移动浏览器的窗口时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onresize</td> 
   <td>当改变浏览器的窗口大小时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onscroll</td> 
   <td>当滚动浏览器的滚动条时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onstop</td> 
   <td>当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>oncontextmenu</td> 
   <td>当弹出右键上下文菜单时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onunload</td> 
   <td>改变当前页面时触发此事件</td> 
  </tr> 
  <tr> 
   <td>表单事件</td> 
   <td>onblur</td> 
   <td>当前元素失去焦点时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onchange</td> 
   <td>当前元素失去焦点并且元素的内容发生改变时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onfocus</td> 
   <td>当某个元素获得焦点时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onreset</td> 
   <td>当点击表单中的重置按钮时触发此事件</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>onsubmit</td> 
   <td>当提交表单时触发此事件</td> 
  </tr> 
 </tbody> 
</table>

### 2.1、事件绑定 ###

事件只有与 HTML 元素绑定之后才能被触发  
onclick、onmouseover 、onmouseout 、onkeydown 、onkeyup 、onblur、onchange  
例子，图片放大缩小

<!DOCTYPE html>
    <html>
    <head>   
        <title>图片</title>     
    </head>
    <body>
        <img id="imageId" src="fengjing.png" style="width: 100px;height:90px" onmouseover="big()" onmouseout="small()"/>
    </body>
    
    </html>
    <script> 
    /**
    * 放大图片
    */
    function big(){
          
        //定义宽度
        document.getElementById("imageId").style.width='1000px';
        //定义高度
        document.getElementById("imageId").style.height='1000px';
    }  
    /**
    * 还原图片
    */ 
    function small(){
          
        //定义宽度
        document.getElementById("imageId").style.width='100px';
        //定义高度
        document.getElementById("imageId").style.height='100px';
    } 
    </script>

## 3、作用域 ##

### 3.1、全局作用域 ###

*  最外层的函数和在最外层函数外面定义的变量拥有全局作用域；
 *  所有未定义直接赋值的变量拥有全局作用域；
 *  所有 window 对象的属性拥有全局作用域，例如 window.name、window.location、window.top 等。

### 3.2、局部作用域 ###

在函数内部声明的变量具有局部作用域，拥有局部作用域的变量也被称为“局部变量”

function myFun(){
        
    	var str = "Hello World!";
    	document.write(str);    // 输出：Hello World!
    }
    document.write(str);        // 报错：str is not defined

--------------------

### 联系方式 ###

#### 微信公众号：Java微服务架构 ####

![在这里插入图片描述][c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/3c75e64814fe4d1d84cca07306d140cd.png
[Java_ _Java]: https://blog.csdn.net/s445320/category_12345409.html
[Aws_ Aws Linux_nginx_git_JDK_Vue]: https://blog.csdn.net/s445320/category_12492968.html
[Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]: https://blog.csdn.net/s445320/category_12439818.html
[Java_ Java_HashMap_String_StringBuffer_JVM_]: https://blog.csdn.net/s445320/category_12369312.html
[Springboot_ _Springboot_RestFul_Swagger_]: https://blog.csdn.net/s445320/category_12273537.html
[Spring MVC_ _Spring MVC_RestFul_]: https://blog.csdn.net/s445320/category_12295009.html
[_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]: https://blog.csdn.net/s445320/category_12426609.html
[Java_ _Java_Selenium_GoogleWebDriver _bing_]: https://blog.csdn.net/s445320/category_8863085.html
[Vue_ _Vue3_axios_Element-ui_]: https://blog.csdn.net/s445320/category_12278346.html
[Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]: https://blog.csdn.net/s445320/category_12283629.html
[c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6f28b15eb6864757a4e70841b6e4ca33.jpeg