js教程（7） - 技术栈

一、事件监听（事件绑定）

1.事件

事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上点击按钮，摁下键盘的某个键。

2.事件监听

事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称之为绑定事件或者注册事件。

比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等。

3.语法

元素对象.addeventListener('事件类型',要执行的函数);

事件监听三要素：

事件源：那个dom元素被事件触发了，要获取dom元素；
事件类型：用什么方式触发，比如鼠标单击click。鼠标经过mouseover等；
事件调用的函数：要做什么事情

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button>我被绑定了</button>
	<script>
		const button = document.querySelector("button");
		button.addEventListener("click",function(){
			alert("事件发生了！");
		});
	</script>
</body>
</html>

浏览器结果：

4.事件监听版本

DOM L0------事件源.on事件=function(){}；
DOM L2------事件源.addEventListener(事件，事件处理函数)；
上述两种方式，on方式会被覆盖，而addEventListener方式可以绑定多次，拥有事件更多特性，推荐使用。

发展历史：

DOM L0------是DOM的发展的第一个版本；
DOM L1------DOM级别1于1998年10月1日成为W3C推荐标准；
DOM L2------使用addEventListener注册事件；
DOM L3------DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型。

二、事件类型

1.鼠标事件

（1）click------鼠标点击；

（2）mouseenter------鼠标经过；

（3）mouseleave------鼠标离开；

2.焦点事件

（1）focus------获得焦点；

（2）blur------失去焦点；

3.键盘事件

（1）Keydown------键盘按下触发；

（2）Keyup------键盘抬起触发；

4.文本事件

（1）input------用户输入事件；

5.其他事件

（1）load------是在网页加载完毕后触发相应的事件处理程序；

（2）change------是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

三、事件对象

事件对象也是个对象，这个对象里有事件触发时的相关信息，例如鼠标点击事件中，事件对象就存了鼠标点在那个位置等信息。

事件对象可以判断用户按下了那个键，比如按下回车键可以发布消息，也可以判断鼠标点击了哪个元素，从而做相应的操作。

语法

元素.addEventListener('click',function(e){});

在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event、ev、e。

事件对象常用属性

1.type------获取当前的事件类型；

2.clientX/clientY------获取光标相对于浏览器可见窗口左上角的位置；

3.offsetX/offsetY------获取光标相对于当前DOM元素左上角的位置；

4.key------用户按下的键盘键的值，现在不提倡使用keyCode；

四、环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境，弄清除this的指向，可以让我们的代码更简洁。

注意点

函数的调用方式不同，this指代的对象也不同；
谁调用，this就是谁------这是判断this指向的粗略规则，在开发中我们调用的多了就会判断this指向谁；
直接调用函数，其实相当于时window.函数，这时this指代window;

五、回调函数

如果将函数A做为参数来传递给函数B时，我们称函数A为回调函数，代码示例：

javascript 复制代码

const button = document.querySelector("button");
button.addEventListener("click",function(){
	console.log("我是回调函数");
});

把函数当做另一个函数的参数传递，这个函数就叫回调函数；
回调函数本质还是函数，只不过把它当成参数使用；
使用匿名函数做为回调函数比较常见。