JavaScript中的函数和事件_js function事件-优快云博客

本文链接：https://blog.youkuaiyun.com/Eternal_tyq/article/details/78746130

本文详细介绍了JavaScript中的函数概念及语法，包括函数的定义、调用、参数传递、返回值等，并阐述了局部变量与全局变量的作用域区别。此外，还讲解了HTML事件的基本概念及其在JavaScript中的应用，如onclick、onfocus等常见事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.函数
1.函数概念：
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
2. 函数语法：
函数就是包裹在花括号中的代码块，前面使用了关键词 function

function functionname()
{
执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

3.函数的调用
（1）调用带参的函数
在调用函数时，您可以向其传递值，这些值被称为参数。

function myFunction(var1,var2)
     {
        代码
     }

var1，var2即为参数

(2)带有返回值的函数

 function myFunction()
      {
         var x=1;
         return x;
      }

4.变量作用域
局部变量：只在函数内部起作用，在函数执行结束后自动销毁。
全局变量：在整个页面中起作用，在页面关闭后销毁。
注意：如果在函数内部定义变量时，没有写初始化var，则视为全局变量。

二.事件
1.基本概念：HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 js 时，js可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。

2.常见的HTML事件

onchange 表单元素的内容发生改变
onclick 点击事件
onmouseover 鼠标放上去事件
onmouseout 鼠标离开事件
onmousedown 鼠标点击时
onmouseup 鼠标松开时
onfocus 获取焦点
onblur 失去焦点
onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载

3.实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input{
            outline: none;
        }
    </style>
</head>
<body>
<input type="text"/>
<script>
    var change=document.getElementsByTagName("input")[0];
    change.onfocus= function () {
        this.style.border="solid 1px red";
    };//文本框聚焦时
    change.onblur= function () {
        this.style.border="solid 1px green";
    }//文本框失去焦点时
</script>
</body>
</html>