WebAPI-DOM事件

DOM事件：某个DOM发生了某件事后，需要做的某些处理。由三个结构组成。
①‘谁’发生了②‘什么事’之后，③‘做了写什么’
①‘button（dom）’ 被 ②‘鼠标左键点击’之后，③‘登录微信’

一.事件的类型
鼠标事件，键盘事件等等
事件有哪些

二.注册事件
1.dom.on+事件

const dom = document.querySelector('a')
//注册事件
dom.onClick = function() {
	alert('click')
}
//移除事件
dom.onClick = null

这种方式的特点：
*优点：易于监听，覆盖，移除
*缺点：只能注册一个处理函数
*缺点：某些事件不支持这种方式注册

2.addEventListener方法注册

const dom = document.querySelector('a')
function clickFunction1() {
	alert(1)
}
function clickFunction2() {
	alert(2)
}
dom.addEventListener('click', clickFunction1)
dom.addEventListener('click', clickFunction2)
都会执行
dom.removeEventListener('click', clickFunction1)
dom.removeEventListener('click', clickFunction2)

三.事件处理
事件发生后，会自动调用事件处理函数，并向函数传递一个参数，该参数为事件对象，里面包含了事件发生的相关信息，比如鼠标位置，键盘按键等等。

e：事件对象
function clickFunction1(e) {
	alert(e.clientX) //打印鼠标的横坐标
}
dom.addEventListener('click', clickFunction1)

*** 阻止元素的默认事件
比如a标签默认点击后会跳转。就算我们给a标签注册了点击事件默认事件还是会存在并且触发点击后执行。
使用event.preventDefault();阻止默认事件

document.querySelector('a').addEventListener('click', function(event) {
    // 阻止超链接跳转
    event.preventDefault();
});

常见的事件对象有：鼠标事件对象 键盘事件对象

*另外，在事件处理函数中，this指针始终指向注册事件的dom