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

2024-01-09 13:34:30

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

🌹作者主页：青花锁 🌹简介：Java领域优质创作者🏆、Java微服务架构公号作者😄
🌹简历模板、学习资料、面试题库、技术互助

🌹文末获取联系方式 📝
在这里插入图片描述

系列专栏目录

[Java项目实战] 介绍Java组件安装、使用；手写框架等
[Aws服务器实战] Aws Linux服务器上操作nginx、git、JDK、Vue等
[Java微服务实战] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作
[Java基础篇] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中
[Springboot篇] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档
[Spring MVC篇] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回
[华为云服务器实战] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等
[Java爬虫] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等
[Vue实战] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等
[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）是当用户与网页进行交互时发生的事情

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

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微服务架构

在这里插入图片描述

文章来源:https://blog.csdn.net/s445320/article/details/135477763
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。