JavaScript函数

函数

what

函数是一段具有特定功能的代码块。函数必须调用，才可以被执行。

函数可以被重复调用，也可以被另一个函数所调用。

作用：开发者根据需求定制 具有特定功能的函数代码块。

分类及定义使用

系统函数

又名 库函数/内置函数

alter()  log()  Number() parseInt()......

由 JS 内部提供的，具有特定功能的函数，供开发者使用。

自定义函数

自己按照自己的需求，定制具有特定功能的函数。

定义函数

基本结构

• 具名函数

function 函数名(参数列表){
	代码块；
	return 返回值；
}

• 匿名函数

function(){

}//匿名函数

匿名函数可以把结果赋值给一个变量，通过变量就可以调用函数
var abs=function(){

}

匿名函数不能单独存在：

①要么 赋值给变量
let aaa = function(){} 此时 这个变量名 就表示函数名
②要么 直接跟页面中的标签对象绑定，此时 只有这个标签对象才可以触发这个函数
① 先获取到这个标签对象
let btnEle = document.getElementById(“btn”)
② 绑定事件
btnEle.onclick = function(){
alert(‘按钮触发的事件’)
}

函数的应用

函数的命名规范

同变量，运用小驼峰命名法

封装函数三要素

• 函数名
• 参数列表
• 返回值

函数的参数和返回值

• 函数参数

形参：定义函数里面所用到的参数为形参

实参：实际调用函数时输入的参数为实参

形参与实参要一一对应，并且形参不能同名

• 返回值：函数运行完毕之后的结果

可以有，也可以没有，具体看需求。

有返回值时，可以使用变量接收，若不使用变量接收，会接收到 undefined

一旦执行到return代表函数执行结束，返回结果

如果没有执行return，函数执行完也会返回结果，结果就是 undefined或者NaN

函数的调用

• 直接调用

  函数名();

• 把函数和页面中的DOM元素绑定，由 DOM 元素通过事件去触发函数执行

  ①直接绑定

  通过事件绑定

<button onclick='fn()' >
    点我
button>
<script>
	function fn(){
        
    }
script>

​ ②与 DOM 绑定 ，使用匿名函数形式

​ 可以先在JS中获取到页面中的DOM 元素，然后操作

<button id='btn'>
    点击
button>
<script>
	document.getElementByID("id值");
	document.getElementByID("btn").onclick=function(){
	console.log(2222);
}
script>

//可以将document.getElementByID("btn").onclic看做成一个变量

绑定函数的角度：
1. 直接在标签中填写要绑定的事件类型和触发的函数

<button onclick="aaa()">点我2button>

			2. 直接跟页面中的标签对象绑定，此时 只有这个标签对象才可以触发这个函数。
					① 先获取到这个标签对象**通过ID**
						let btnEle = document.getElementById("btn")
					② 绑定事件
						btnEle.onclick = function(){
							alert('按钮触发的事件')
						}

绑定事件函数三步走

• who 触发事件的事件源 ：给谁绑定函数 （哪个标签）
• When 什么时机 类型 点击时触发 事件操作
• what 干什么 函数的主体代码

对象

what

how

事件

what

一种可以被浏览器识别的操作

常用事件

1. 鼠标事件

   事件
   * onclick	单击事件
   ondblclick	双击事件
   onmousedown	鼠标按下
   onmouseup	鼠标松开
   onmouseover	鼠标移入
   onmouseout	鼠标移出

2. 键盘事件

   onkeydown	按下
   onkeyup	松开
   onkeypress	按下并松开

3. 浏览器事件

   *onload	页面加载完成时触发
   *onunload	页面退出时触发

4. 表单事件

* onblur	元素失去焦点时触发	2
* onchange	该事件在表单元素的内容改变时触发( , , , 和 )	2
* onfocus	元素获取焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 ( )
onselect	用户选取文本时触发 ( 和 )	2
* onsubmit	表单提交时触发

事件冒泡

事件冒泡：事件触发时的传播机制。
在触发 子元素绑定的事件时， 事件的行为会向上 一直传递 ，同时也会把其父元素身上的事件 触发。

页面 DOM

页面元素：即在body里面的元素

DOM ：document

以后做DOM操作，想操作哪个DOM元素，必须先获取到，变量也是(在函数外面获取)

与HTML、CSS结合使用