API事件

---

事件

事件类型

• 鼠标触发：click（鼠标点击）、mouseenter（鼠标经过）、mouseleave（鼠标离开）
• 表单获得光标：foucs（获得焦点）、blur（失去焦点）
• 键盘触发；Keydown（键盘按下触发）、Keyup（键盘抬起触发）
• 表单输入触发：input（用户输入事件）

事件监听

定义

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

使用

语法：元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素：

• 事件源：哪个dom元素被事件触发了，要获取dom元素
• 事件类型：用什么方式触发
• 事件调用的函数：要做什么事

例如：

<button></button>
<script>
	const btn = document.querySelector('.btn')
	btn.addEventListener('click',function() {
		alert('点击了')
	})
</script>

注意：

• 事件类型要加引号
• 函数是点击之后再去执行，每次点击都会执行一次

事件对象

定义

也是一个对象，这个对象里有事件触发时的相关信息
在事件绑定的回调函数的第一个参数就是事件对象，如下面语法中的e

使用

语法：元素.addEventListener('click',function(e){})

常用属性

• type：获取当前的事件类型
• clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
• offsetX/offestY：获取光标相对于当前DOM元素左上角的位置
• key：用户按下的键盘键的值

环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
作用：可以让代码更简洁
函数的调用方式不同，this指代的对象也不同
粗略规则：谁调用，this就是谁
例如：

<button>点击</buton>
<script>
	//每个函数里面都有this环境对象，普通函数里面的this指向的是window
	function fn() {
		console.log(this)
	}
	const btn = document.querySelector('button')
	btn.addEventListener('click',function(){
		console.log(this)//this是btn
		this.style.color = 'red'
	})

回调函数

如果将函数A作为参数传递给函数B时，称函数A为回调函数
例如：

function fn() {
	console.log('回调函数')
}
//fn传递给了setInterval，fn就是回调函数
setInterval(fn,100)