JavaScript函数与DOM事件

JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript 中函数就是包裹在花括号中的代码块。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

函数的声明

// 标准定义写法：
function fun1() {
	console.log("我是方法1");
}

声明一个函数的关键字是：function，fun1 是函数的名称，() 是函数的参数列表，{}是函数的函数体。

---

如果函数有返回值，直接使用 return 关键字返回即可：

function fun2() {
	return 3.14;
}

---

如果函数有参数，直接在()中声明即可，不要关键字 var、let 和 const：

// 当函数存在多个参数的时候，使用逗号隔开即可
function fun3(a, b, c) {
	return a + b + c;
}

函数的调用

在方法名称后带小括号并在小括号中传参即可：

// 调用没有参数，没有返回的函数
var a = fun1();
console.log(a); 	// undefined

// 调用没有参数，有返回的函数
var b = fun2();
console.log(b); 	// 3.14

// 调用有参数，有返回的函数
var c = fun3(3, 5, 7);
console.log(c);		 // 15

如果一个函数没有返回值，允许使用变量来接收，接收的值是 undefined。

函数和变量

如果将一个函数的名称传递给一个变量，这个变量就变成一个函数：

var a = 10;
console.log(a, typeof a); 		// number

// 当方法名称后没有小括号的时候，这个方法不会被调用，而是将方法的引用传递给变量 a，变量 a 就可以被调用了
a = fun1;
console.log(typeof a); // function
a();		//我是方法1

匿名函数

对于 var 关键字声明的变量，可以直接接收一个方法的名称，它实际上是一个方法的地址。

结合 var 和 function 两个关键字，可以将声明函数的方式写成如下格式：

// 使用 function 关键字声明一个没有名字的函数，被称之为匿名函数。
//可以将其直接赋值给一个变量，那么这个变量就可以被调用！
var a = function() {
	console.log("你好呀!");
};

可以发现，function 关键字后没有函数名称，这样的声明方式得到的函数被称之为匿名函数。匿名函数不可以直接调用，必须借助一个变量。

箭头函数

在匿名函数的基础上，省略关键字 function，同时在参数列表和函数体中间，使用 => 来连接。也称之为λ表达式。

var a = () => {
	console.log("你好呀!");
};

当箭头函数中仅存在一句代码时，允许省略 {}，即：

var a = () => console.log("你好呀!");

函数小练习

1

• 每隔 1s 为正方形随机设置一个颜色。
• 每隔 1s 增加正方形的边框半径。

<style>
	div { width: 100px; height: 100px; }
</style>

<div id="d" style="background-color: red;" ></div>

<script>
	// 每隔 1s 为这个正方形随机设置一个颜色
	function changeColor() {
		var r = Math.floor(Math.random() * 255);
		var g = Math.floor(Math.random() * 255);
		var b = Math.floor(Math.random() * 255);
		d.style.backgroundColor = "rgb(" + r + "," + g + "," + b +
	")";
	}
	// 每隔 1s 调用一次 changeColor 方法
	var interval1 = setInterval(changeColor, 1000);

	// 每隔 1s 增加这个正方形的边框半径
	var interval2 = setInterval(function() {
		var r = d.style.borderRadius;
		// 将边框半径的字符串形式转换为数字形式
		r = parseInt(r);
		// 如果 r 是非数字，则设置为 0
		r = isNaN(r) ? 0 : r;
		r+=5;
		if(r >= 50) {
			// 当边框半径到达 50px 的时候，关闭计时器
			clearInterval(interval1);
			clearInterval(interval2);
		}
		d.style.borderRadius = r + "px";
	}, 1000);
</script>

2

编写一个函数，参数是一个整数，返回该整数的阶乘。

function factorial(a) {
	if(typeof a !== "number") {
		return a;
	}
	if(a < 2) {
		return 1;
	}
	return a * factorial(a - 1)
}

3

使用 setTimeout 达到 setInterval 的效果。

function go() {
	console.log("你好呀");
	setTimeout(go, 1000);
}

go();

DOM 事件

事件驱动

任何一个 HTML 元素都具备大量的事件，这些事件一旦触发，可以立即执行一段 js 代码或调用 js 函数。这种现象被称之为事件驱动。

onclick: 当用户主动点击了某个元素后，将立即触发 js 解释器去执行 js 代码。例如：onclick="handleClick()" 当点击事件发生，将立即调用 handleClick 方法。

<!-- onclick : 当按钮被点击的时候，调用 onclick 中指定的代码 -->
<button onclick="handleClick()">你点我呀</button>

<script>
	function handleClick() {
		console.log("你好呀");
}
</script>

除了在HTML代码中对事件进行绑定，也可以在 js 中通过对 HTML 对象的属性 onclick 进行事件的绑定：

<button id="btn">你点我呀</button>

<script>
	function handleClick() {
		console.log("你好呀");
	}
	// 为 btn 的 onclick 赋予一个方法的名称
	// 当按钮被点击的时候，就可以调用 handleClick 方法
	btn.onclick = handleClick;
</script>

事件监听

为了使得用户触发某个事件的时候，执行某段 js 代码，除了可以使用事件类的 HTML 元素属性来绑定外，还可以通过事件监听来实现。

在 js 中，如果查找到某个元素，可以通过 addEventListener 来实现对特定事件的监听：

<button id="btn">你点我呀</button>

<script>
	// 第一个参数代表的是事件的名称，不需要 on 开头
	// 第二个参数代表的是触发该事件后需要调用的函数，可以是函数名、也可以是匿名函数
	btn.addEventListener("click", function() {
		console.log("你好呀！");
	});
</script>