前端WebAPIs回顾2

事件监听

事件是在系统内发生的动作或发生的事情，给DOM元素添加事件监听则是为了在该元素某事件发生时返回响应。

语法

addEventListener:多次添加事件，不覆盖前面事件，可做冒泡也可做捕获

// Object.addEventListener(string,function)
EleObj.addEventListener('event-type',fn)

当event-type事件被执行时,执行fn。
on:与addEventListener相比，on适用于单次的事件添加，多次执行on会覆盖前面的事件绑定，只能做冒泡

EleObj.on=fn

事件类型

鼠标事件
click:鼠标点击
mouseenter:鼠标经过
mouseleave:鼠标离开

焦点事件
focus：获得焦点
blur:失去焦点

键盘事件
Keydown:键盘按下
Keyup:键盘抬起

文本事件
input:用户输入

事件对象

在事件绑定的fn的第一个参数是事件对象

EleObj.addEventListener('event-type',fn(e))

常用属性：type、clientX/clientY(获取光标相对于浏览器可见窗口左上角的位置)、offsetX/offsetY(获取光标相对于当前DOM元素左上角的位置)、key（用户按下的键盘值）

环境对象

指的是函数内部特殊遍历this，代表当前函数运行所处的环境；在普通函数里this指向window,在事件绑定函数中this指向绑定元素，即谁调用指向谁

回调函数

当一个函数作为参数传递给另外一个函数时，作为参数的函数为回调函数

事件流

事件流指的是事件完整执行过程中的流动路径，分为捕获阶段与冒泡阶段，捕获就是在寻找执行事件元素的过程（父->子），冒泡为执行事件绑定回调时会默认执行父元素的绑定的同一事件回调（子->父）。

捕获机制

在绑定事件addEventListener中第三个参数为是否开启捕获机制（true为开启）,在开启后，会依次执行从父到子的已开启的同一事件的回调函数

DOM.addEventListener('event-type',fn,boolen)

冒泡机制

在绑定事件addEventListener中第三个参数为是否开启捕获机制（默认false，则为冒泡阶段）

stopPropagation()

该属性为阻止传播，既能阻止捕获也能阻止冒泡。

e.stopPropagation()

解绑事件

on事件解绑

EleObj.onEvent=null

addEventListener解绑

EleObj.removeEventListener('event-type',fn)

事件委托

同时给多个事件进行事件绑定，可以减少注册次数，提高程序性能。
原理：利用冒泡特点，直接给父元素注册事件，当触发子元素时会冒泡到父元素身上，从而触发父元素事件。

const parent=document.querySelector('.parentEle')
parent.addEventListener('event-type',fn(e){
    if(e.target.tagName='tagName') {e.target.style.color='red'}
})

阻止默认行为

在某些情况下需要阻止默认行为的发生，比如在点击链接后我希望先进行弹窗后跳转，此时我可以先阻止链接的默认跳转。

e.preventDefault()

其他事件

页面加载事件

加载外部资源完毕时触发的事件，在有些页面资源加载缓慢时，我们的js会无法获取未加载的页面元素导致报错，因此我们需要等待页面加载。
load:等待页面所有资源（html、css、img等）完全加载后执行

window.addEventListener('load',fn)

DOMContentLoaded:当初始html被完全加载解析后该事件触发

document.addEventListener('DOMContentLoaded',fn)

元素滚动事件

滚动条在滚动时持续触发的事件。

EleObj.addEventListener('scroll',fn)

有一个需求：当我滚动到某一位置后执行某些操作
scrollLeft:往左卷去的距离
scrollTop:往上卷去的距离

EleObj.addEventListener('scroll'，fn(){
    if(this.scrollTop>=num) ....//opt
})

在获取html时使用document.documentElement

页面尺寸事件

当页面尺寸发生变化时使用
clientWindth:获取元素可见宽（不包含边框、margin、滚动条）
clientHeight：获取元素可见高（同上）

EleObj.addEventListener('resize'，fn)

元素尺寸
offsetWidth:获取元素宽（包括边框、margin）
offsetHeigth获取元素高（同上）
元素位置
offsetLeft:获取元素位于父元素左边的距离（只读）
offsetTop：获取元素位于父元素顶部的距离（只读）