您的当前位置：首页正文

JavaScript中的函数和事件

来源：好走旅游网

一.函数
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>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文