Js函数基础01

目录

• JS函数入门小结01
  • 函数的定义
  • 函数语法
  • 作用域
    • 作用域定义
    • 变量作用域
  • 函数事件
    • 定义
    • 事件的三要素
    • 函数调用事件的语法
    • 常用事件类型
    • 函数好处

JS函数入门小结01

函数的定义

函数就是一个封装集合体
每个函数都代表一个功能
每个函数还代表一个API 又称解决方法。

函数语法

function 函数名（）{}
其中函数名要遵循标识符命名规则 并且 要避免大驼峰命名法
函数调用直接在程序中写函数名();即可。

函数编程方法有三种
1. 面向对象式编程
2. 函数式编程
3. 面向过程编程

作用域

作用域定义

变量或函数生效的范围即可称为作用域

变量作用域

变量声明后生效的范围

1. 在函数外部声明的变量是全局变量,其作用域就是全局变量

2. 在函数内部用var声明的变量s可称为局部变量,其作用域是函数作用域

3. 在es6中新增了块级作用域

特例情况：
在函数内部声明函数，没有使用var进行声明，这个变量则就变成全局变量。

在函数内部创建的全局变量有可能影响外部全局变量就会导致函数污染

函数事件

定义

指的是用户的某种操作（在浏览器中的各种操作和行为）

事件的三要素

1.事件源
2.事件
3.事件的结果

函数调用事件的语法

例

 btn.onclick = function(){
 }

事件用法

将一个普通函数设置为事件处理处理函数 。调用的时候不需要加小括号，如果加了小括号就会立即调用。
例(正确写法)

   function fn1(){
       console.log('hello,world');
   }
   btn.onclick = fn1 ;//每点击一次，就会出现一次输出
   btn.onclick = fn1();//会直接输出，点击不会有任何反应

事件监听

常用事件类型

鼠标事件
1. click 鼠标单击事件
2. dblclick 鼠标双击事件
3. contextmenu 鼠标右击事件
4. mousedown 鼠标按下事件
5. mouseup 鼠标抬起事件
6. mousemove 鼠标移动事件
7. mouseover 鼠标移入事件
8. mouseout 鼠标移出事件

键盘事件
1. keydown 键盘按下事件
2. keyup 键盘抬起事件
3. keypress 键盘响应事件

加载事件
1. load 加载事件（window.load 文档入口函数/文档就绪函数）
2. error 加载失败事件

表单事件
1.submit 提交事件
2.reset 重置事件
3.blur 失焦事件
4.change 内容改变并失去焦点
5.focus 聚焦事件

其他事件
1.scroll 滚动事件
2.resize 调整大小

event 事件最高选项
event.key 可以看到你点击哪个键

函数好处

1. 减少代码重复
2. 提高代码的安全程度
3. 降低耦合度
4. 提高开发效率