JS事件简介

事件流

在一个页面中点击某个元素，并非只有触发了这个元素，还包括这个元素外的所有父级内容；用红宝书的描述：在一张纸上画多个同心圆，手指放在圆的中心，也同时放在了所有圆的中心。 IE浏览器和网景浏览器用了两种方法处理这种矛盾。
1. 事件冒泡
IE浏览器采用了冒泡的方法，冒泡是从底层元素 冒到最高元素 Document 一层 一层向上冒泡：
div -> body -> html -> document

2. 事件捕获
网景浏览器刚好相反，从顶层开始，元素最终捕获事件
document -> html -> body -> div

而在 DOM2 时期，定义了事件的三个阶段，事件捕获、到达目标、事件冒泡。

事件处理程序

事件处理分DOM0和DOM2事件处理，DOM0在设计模式中是观察者模式，是在冒泡阶段被触发

DOM0事件处理函数

let btn = document.getElementById('mybtn')
btn.onClick = function() {
    
	console.log('clicked')
}

但DOM1事件会被覆盖，只能处理一个对应的函数。

DOM2事件处理函数

DOM2的事件处理可以控制在冒泡阶段还是捕获阶段触发，是发布订阅模式。
addEventListener( 'Event', Function, Boolean)
Event是触发的事件名，Function是对应的处理函数，Boolean的flase是默认值，表示在冒泡阶段；true为捕获阶段。

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' _ => {
     console.log('clicked'), true)

DOM2 的优点在于可以添加多个处理函数，且不会被覆盖

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' _ => {
     console.log('clicked'), true)
btn.addEventLisenter('click' _ => {
     console.log('HelloWorld'), false)

事件对象

所有事件都会自带一个事件对象， 这个对象会在调用函数时传入

let btn = document.getElementById('mybtn')
btn.onClick = function(e) {
    
	console.log(e) //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
}

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' e => {
     console.log(e), true)
//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

对象中包含很多属性，包括target，type， view 对事件的种种操作就是基于该事件对象。

事件类型

事件类型众多，每个事件类型下又有不同的事件，大部分的事件类型如下：

• 用户界面事件
• 焦点事件
• 滚轮事件
• 输入事件
• 键盘事件
• 合成事件
• html5事件
• （移动设备）
• 触摸屏事件
• 设备事件
• 手势事件