4.26 函数的执行和常见事件

Posted xiaokeai233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了4.26 函数的执行和常见事件相关的知识,希望对你有一定的参考价值。

# 一、函数
## 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(){}
    注意:行为的触发方式是否正确
            尤其是表单类

以上是关于4.26 函数的执行和常见事件的主要内容,如果未能解决你的问题,请参考以下文章

jquery 的几种写法和常见问题

常见的网络 I/O 模型

说说事件

JavaScript中BOM简介及其对象js执行机制

4.26

JS防抖和节流