前端 day6

一 函数

1 函数的概念

     1 空调：

       概念：由遥控器或开关控制，可以实现调节空气的功能的家用电器

       特点：

忽略细节；

重复使用；

选择性使用

2 函数：

       概念：由用户或自身控制，可以实现某个功能的代码段（许多代码）

    特点：

忽略细节： 在使用过程中，只需关注其实现的功能，而不需要关注其内部原理

重复使用： 多次使用

选择性使用：按需使用

2 创建函数

     1 函数从哪里来

       1 内置（系统提供，公司发的），比如：

         1 parseInt()

         2 parseFloat()

         3 alert()

       2 自定义（自己写）

         1 声明式创建函数

           1 需要配合关键字 function

           2 语法    function 函数名( ){ }

              1 function fn( ){ }

                 function         声明函数的关键字

                 fn              自己定义的函数名

                 ( )               函数的参数

                 { }               容器，放置代码段，函数体

 2 赋值式创建函数

           1 需要配合关键字 var 和 function

           2 语法    function 函数名( ){ }

             Var 变量名 = function(){}

         3 函数其实就是一个变量，只不过内存存的是一段代码，且这段代码被一个容器包裹了

3 函数的执行

1 函数名（）         第1 种

1 固定语法：

       2 只要函数后面有小括号，必然会立即执行**当前**函数

     2 通过事件执行

        1  执行无名函数

元素.事件 = function(){}     

2  执行有名函数

元素.事件 = 函数名          

        3  无名函数配合有名函数，使用较多

元素.事件 =  function(){        

     函数|变量名（）

}                       

   4 函数分类

     1 根据写法分类

       1 有名函数

         1 正常函数

         2 使用频率最多的函数

         3 声明式和赋值式创建的函数

             function 函数名(){}

             var 变量名 = function(){}

         4 执行

           1 常规执行：函数名或变量名（）

       2 无名函数

         1 非正常函数

         2 没有名字

            function(){}

         3 不允许直接存在在代码空间中，否则会报错

         4 使用场景

           1 作为变量的值存在（赋值式创建函数的值）

             var 变量名 = function(){}

             执行：函数名|变量名（）

           2 作为事件处理函数执行

             btn.onclick = function(){

    //当事件被触发时要执行的内容

}

       3 匿名函数   。。。

   5 函数的参数

     1 参数概念

       根据用户传入不同的参数，选择执行函数中不同的功能。

     2 函数的分类

       1 发：实参     函数执行时的参数

       2 收：形参     函数定义时的参数

       3 实参和形参的关系：

赋值的关系，形参相当于变量，实参相当于值，一对一

       4 函数的执行，每次都是独立执行， 除非有特殊处理，否则不会得到上次执行的内容

       5 数量对应关系

         1 参数可以有许多个，语法没有数量限制，但是行业习惯，自定义函数，除非特殊需要，一般不要超过3个，否则不好管理

         2 实参和形参数量一致

           按照顺序，一一对应

         3 实参多

           1 没有形参接收，通过形参找不到；

           2 在函数内部有个空间(arguments)，这个空间会将所有的实参全部保存，不论有没有接收

           3  arguments是个对象类型的数据（类数组的数据）

              1 长度（个数），表示接受到了几个实参

                 arguments .length

              2 索引（序号，编号），表示数组内部的数据位置，索引从0开始

         4 形参多

           1 多出来的形参是undefined

           2 形参其实就是一个变量，实参是赋值，如果实参不够，表示没有赋值，undefined

   6 函数的返回值

     1 。。。

二 事件按照输入设备分类

   1 鼠标类

     单击：click

     双击：dblclick

     按下：mousedown

     抬起：mouseup

     移动：mousemove

     进入：mouseover / mouseenter

     离开：mouseout / mouseleave

     右键：contextmenu

   2 键盘类

     按下：keydown

     抬起：keyup

     按下并抬起：keypress

   3 浏览器类

     加载：load

     滚动：scroll

     改变大小：resize

   3 表单类

     获取焦点：focus

     失去焦点：blur

     输入：input

     内容改变：change

     提交事件：submit

     重置事件：reset

三 所有事件的绑定方式都是一致的

   1 on绑定，赋值类绑定

     元素.on事件名 = function(){}