4.26 函数的执行和常见事件

Posted 2021-02-21 xiaokeai233

# 一、函数
## 1.函数的概念
- 函数：由用户或自身控制，可以实现某个功能的 代码段（很多代码）

- 函数的特点：
    - 忽略细节：在**使用过程**中，只需要关注其实现的功能，而不需要关注其内部原理
    - 重复使用：多次使用
    - 选择使用：按需使用

## 2.创建函数
- 函数从哪来
    - 内置（系统提供，公司发的）
        - `parseInt()`
        - `parseFloat()`
        - `alert()`

    - 自定义（自己写，自己给自己做）
        - 声明式创建函数
            - 需要配合关键字：`function`
            - 语法：
                ```js
                    function 函数名(){}
                ```
        - 赋值式创建函数
            - 需要配合关键字：`var`和`function`
                ```js
                    var 变量名 = function(){}
                ```
        - 函数其实就是一个变量，只不过内部存的是一段代码，这段代码还被一个容器包裹了

## 2.创建函数
- 函数从哪来
    - 内置（系统提供，公司发的）
        - `parseInt()`
        - `parseFloat()`
        - `alert()`

    - 自定义（自己写，自己给自己做）
        - 声明式创建函数
            - 需要配合关键字：`function`
            - 语法：
                ```js
                    function 函数名(){}
                ```
        - 赋值式创建函数
            - 需要配合关键字：`var`和`function`
                ```js
                    var 变量名 = function(){}
                ```
        - 函数其实就是一个变量，只不过内部存的是一段代码，这段代码还被一个容器包裹了

## 3.执行函数
- 函数名()
    - 只要函数名后面有小括号，必然会立即执行**当前**函数
    - 固定语法
- 通过事件执行
    - 执行无名函数
    ```js
        元素.事件 = function(){}
    ```
    - 执行有名函数
    ```js
        元素.事件 = 函数名
    ```
    - 无名函数配合有名函数，使用较多
    ```js
        元素.事件 = function(){
            函数|变量名()
        }
    ```

## 4.函数分类
- 根据写法分类
    - 有名函数：
        - 正常函数
        - 使用频率最多的函数
        - 声明式和赋值式创建的函数
        ```js
            function 函数名(){}
            var 变量名 = function(){}
        ```
        - 执行
            - 常规执行：函数名或变量名()
    - 无名函数：
        - 非正常函数
        - 没有名字
        ```js
            function(){}
        ```
        - 不允许直接存在于代码空间中，否则会报错
        - 使用场景：
            1. *作为*变量的**值**存在（赋值式创建函数时的**值**）
                ```js
                    var 变量名 = function(){}
                ```
                - 执行：函数名|变量名()
            2. *作为*事件处理函数执行
                ```js
                btn.onclick = function(){
                    // 当事件被触发时要执行的内容...
                }
                ```
            3. ...

    - 匿名函数：
        ...

## 5.函数的参数
- 什么是参数
    - 根据用户传入不同的参数，选择执行函数中不同的功能
- 参数的分类：
    - 发：实参：函数执行时的参数
    - 收：形参：函数定义时的参数
    - 实参和形参的关系，赋值的关系，形参相当于变量，实参相当于值，一对一

- 数量对应关系
    - 参数可以有很多个，语法上没有数量限制，但是行业有习惯，自定义函数，如非特殊需要，尽量不要超过3个
    - 实参和形参数量一致：
        - 按照顺序，一一对应
    - 实参多：
        - 没有形参接收，通过形参找不到
        - 在函数内部有个神秘的空间（arguments），这个空间会将所有的实参全部保存，不论有没有被接收
        - arguments是个对象类型的数据（类数组的数据）
            - 长度（个数），表示接收到了几个实参
                - `arguments.length`
            - 索引（序号，编号），表示数组内部的数据位置，索引从0开始
                - `arguments[索引]`
    - 形参多：
        - 多出来的形参是undefined
        - 形参其实就是一个变量，实参是赋值，如果实参不够，表示没有赋值，undefined

 

 

    人机交互
        输入和输出
            输入设备：鼠标，键盘，...
            输出设备：显示器，音响，...

    事件按照输入设备分：
        鼠标类：
            单击：click
            双击：dblclick
            按下：mousedown
            抬起：mouseup
            移动：mousemove
            进入：mouseover / mouseenter
            离开：mouseout / mouseleave
            右键：contextmenu

        键盘类：
            按下：keydown
            抬起：keyup
            按下并抬起：keypress

    网页的特色事件
        浏览器类：
            加载：load
            滚动：scroll
            改变大小：resize

        表单类：
            获取焦点：focus
            失去焦点：blur
            输入：input
            内容改变：change
            提交事件：submit
            重置事件：reset
   

    。。。。。。。。

    所有事件的绑定方式都是一致的
        目前学习了一种：on绑定，赋值式绑定
            元素.on事件名 = function(){}

    注意：行为的触发方式是否正确
            尤其是表单类