Js鼠标事件与函数

1. 鼠标事件（Mouse Events）

通过鼠标触发事件, 类似用户的行为:

1. 鼠标事件列表，要在body里设一个div，id名要为box，style里设置它的宽、高，然后再script里设置脚本语言，使它在里面能够运行。下面script都例了鼠标每一样事件，把注释解掉，在把上面的注释掉就可以在浏览器查看鼠标事件。

<script>

       var box = document.getElementById("box");

       //鼠标单击事件

        box.onclick = function(){

            alert(123);

        }

        //鼠标双击事件

        // box.ondblclick = function(){

        //     alert(123);

        // }

        //鼠标移入事件、鼠标移出事件

        // box.onmouseover = function(){

        //     console.log("鼠标在元素上面");

        // }

        // box.onmouseout = function(){

        //     alert(456);

        // }

        // box.onmouseover = function(){

        //     console.log("鼠标在移动");

        // }

        // 鼠标按下、松开事件

        // box.onmousedown = function(){

        //    console.log("当前鼠标为按下状态")

        // }

        // box.onmouseup = function(){

        //     console.log("当前鼠标为松开状态")

        // }

        // 鼠标滚动事件

        // window.onmousewheel = function(){

        //      console.log("box为滚动状态")

        //  }

        // window.onmousewheel = function(){

        //      console.log("滚动条事件")

        //  }

</script>

1. JavaScript-函数

1、函数定义:JavaScript 函数是被设计为执行特定任务的代码块。

2、JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是***函数名***和括号 ()；

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同);

function name(){

    要执行的代码

}

1. 调用函数

函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

 第一种情况:在<script>标签内调用。

 第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

1. 返回值的函数

当我们会希望函数将值返回调用它的地方，通过使用 return 语句就可以实现；

在使用 return 语句时，函数会停止执行，并返回指定的值。

1. 返回值的函数代码：

function add2(x,y){

    sum = x+y;

    return sum;//返回函数值，return 后面的值叫做返回值

}

// var result = add2(35,40);

// console.log(result);  控制台输出的值为：80

var result = add2("今天是","星期四");

console.log(result);//控制台输出的值为：今天是星期四

1. 有参数的函数   

function 函数名(参数1,参数2){

 函数代码;

    }

注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。

add2(3,34);//调用函数

//最终输出值为：37

2. 执行完返回值函数时，整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方，函数调用将被返回值取代；
3. 注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。