JavaScript进阶-WebAPI（DOM事件）

二、JavaScript进阶-WebAPI

DOM事件-基础

事件概念

什么是事件?
　　事件是在编程时系统内发生的动作或者发生的事情
　　比如用户在网页上单击一个按钮
事件监听
　　就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
语法:
　　DOM L0 事件源.on事件类型 = function(){}
　　DOM L2 事件源.addEventListener(事件类型， 事件处理函数)
事件监听三要素:
　　事件源：那个dom元素被事件触发了，要获取dom元素
　　事件：用什么方式触发，比如鼠标单击click、鼠标经过mouseover 等
　　事件调用的函数：要做什么事

let button = document.querySelector('button')
	button.addEventListener('click', function () {
	alert('提交成功！')
});

注册事件的两种方式

传统on注册（L0）
　　同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
　　直接使用null覆盖，就可以实现事件的解绑
　　都是冒泡阶段执行的
事件监听注册（L2）
　　语法：addEventListener(事件类型, 事件处理函数, 是否使用捕获)
　　后面注册的事件不会覆盖前面注册的事件(同一个事件)
　　可以通过第三个参数去确定是在冒泡或者捕获阶段执行
　　必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
　　匿名函数无法被解绑

常用事件类型

鼠标事件
　　click：在单个元素上单击鼠标 (通常是鼠标 的主按钮) 时触发
　　dblclick：在单个元素上单击两次鼠标 (通常是鼠标 的主按钮) 时触发

close_btn.addEventListener('click', function () {
	QRCode.style.display = 'none'
})

mouseenter：当定点设备（通常指鼠标）移动到元素上时就会触发
　　mouseover：当定点设备（通常指鼠标）的指针移出某个元素时
　　　　mouseover和mouseenter的区别
　　　　　　mouseover和mouseout会有冒泡效果
　　　　　　mouseenter和mouseleave没有冒泡效果
　　mousedown：事件在指针设备（如鼠标或触摸板）按钮按下时触发
　　mouseup：事件在指针设备（如鼠标或触摸板）按钮放开时触发
焦点事件
　　focus【获得焦点】, blur【失去焦点】
键盘事件
　　keydown
　　　　键盘按下触发
　　　　会在值落到表单之前触发, 所以获取的结果是上一次的结果
　　keyup
　　　　键盘抬起触发
　　　　会在值落到表单之后触发, 所有获取的是当前这一次的结果
文本事件
　　input

DOM事件-高级

事件流概念

过程：
　　事件捕获 => 事件目标阶段 => 事件冒泡 整个完整的过程就是事件流

事件捕获

概念：
　　从DOM的根元素开始去执行对应的事件 (从外到里)
捕获机制必须使用事件监听的形式注册
　　DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

事件冒泡

概念：
　　当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
　　事件冒泡默认存在
事件冒泡的必要性
　　如果没有冒泡，给大盒子注册点击事件，点击的是里面的小盒子，会导致大盒子的点击无法执行
事件委托
　　原理：
　　　　利用事件冒泡的特点，给父元素添加事件，子元素可以触发
　　优点：
　　　　给父元素注册事件，提高性能
　　实现：
　　　　e.target => 获得真正触发事件的元素

阻止事件冒泡

e.stopPropagation()
　　阻止事件冒泡，此方法在捕获阶段也有效
e.preventDefault()
　　阻止默认行为，比如点击链接不跳转，阻止表单域提交

先要明确那一块区域不能冒泡，需要阻止什么事件传递，就给这块区域的最大盒子注册该事件
在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()