Web APIs第二天

事件

语法：元素.addEvenListener('事件'，要执行的函数)；

取消事件绑定：元素.removeEventListener(事件,要执行的函数 )；无法取消匿名函数的事件

事件监听三要素

1. 事件源： 那个dom元素被事件触发了，要获取dom元素
2. 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
3. 事件调用的函数： 要做什么事

事件类型

1. 鼠标事件(鼠标触发)

   1. click 鼠标点击
   2. mouseenter 鼠标经过
   3. mouseleave 鼠标离开
   4. mousemove 鼠标移动
   5. mouseup 鼠标弹起
   6. mousedown 鼠标按下

2. 焦点事件(表单获得光标)

   1. focus 获得焦点
   2. blur 失去焦点

3. 键盘事件(键盘触发)

   1. keydown 键盘按下触发
   2. keyup 键盘抬起触发

4. 文本事件(表单输入触发)

   1. input 用户输入事件

5. 滚动事件：页面进行滚时触发

   ​ scroll

   用法：window.addEventListener('scroll', function() {

   ​ //执行的操作

   })

   一般给window或者document添加

   获取当前滚动的距离document.documentElement.scrollTop

   pc端滚动条占17px

   移动端混动条不占大小

6. 加载事件：监听页面所有资源加载完毕

   ​ load

   用法：window.addEventListener('load', function () {

   ​ //执行的操作

   })

   给window添加load事件

   ​ DOMContentLoaded

   用法：document.addEventListener('DOMContentLoaded', function () {

   ​ //执行的操作

   })

   给doument添加DOMContentLoaded事件

阻止刷新属性 preventDefault

如：event.preventDefault();

事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

捕获阶段：Document -> Element html -> Element body -> Element div

true btn.addEventListener('click',function() {

​ alret('你好')；

​ }，true)

冒泡阶段：Element div -> Element body -> Element html -> Document(常用)

false(默认不写) btn.addEventListener('click',function() {

​ alret('你好')；

​ }，false)

没有冒泡：blur、onfocus、onmouseenter、onmonuseleave

阻止冒泡：stopPropagation()；

事件对象

1. event 就是一个事件对象，写到我们监听函数的小括号里面，当形参来看
2. 事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
3. 事件对象使我们事件的一系列数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息
4. 这个事件命名比如：event、evt、e

获取事件对象

type:输出当前的事件类型

​ 用法：event.type

clientX，clientY:返回鼠标的位置，参照物是页面的左上角

offsetX,offsetY：返回鼠标的坐标 参照物是被点击的元素的左上角

事件委托

优点：给父级元素加事件（可以提高性能） 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发 实现：事件对象.target 可以获得真正触发事件的元素