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()">点我2</button>
2. 直接跟页面中的标签对象绑定，此时 只有这个标签对象才可以触发这个函数。
① 先获取到这个标签对象**通过ID**
let btnEle = document.getElementById("btn")
② 绑定事件
btnEle.onclick = function(){
alert('按钮触发的事件')
}
绑定事件函数三步走
- who 触发事件的事件源 ：给谁绑定函数 （哪个标签）
- When 什么时机 类型 点击时触发 事件操作
- what 干什么 函数的主体代码
对象
what
how
事件
what
一种可以被浏览器识别的操作
常用事件
-
鼠标事件
事件 * onclick 单击事件 ondblclick 双击事件 onmousedown 鼠标按下 onmouseup 鼠标松开 onmouseover 鼠标移入 onmouseout 鼠标移出 -
键盘事件
onkeydown 按下 onkeyup 松开 onkeypress 按下并松开 -
浏览器事件
*onload 页面加载完成时触发 *onunload 页面退出时触发 -
表单事件
| * onblur | 元素失去焦点时触发 | 2 |
|---|---|---|
| * onchange | 该事件在表单元素的内容改变时触发( , , , 和 ) | 2 |
| * onfocus | 元素获取焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input=“search”>) | |
| onselect | 用户选取文本时触发 ( 和 ) | 2 |
| * onsubmit | 表单提交时触发 |
事件冒泡
事件冒泡：事件触发时的传播机制。
在触发 子元素绑定的事件时， 事件的行为会向上 一直传递 ，同时也会把其父元素身上的事件 触发。
页面 DOM
页面元素：即在body里面的元素
DOM ：document
以后做DOM操作，想操作哪个DOM元素，必须先获取到，变量也是(在函数外面获取)