WebApi复习03-DOM(事件总结)

事件作用

事件作用 ： 实现交互功能的

事件三要素

事件源： 什么元素

事件类型: 什么时刻

事件处理函数: 做什么事情

事件工作原理

注册事件 ： 本质是给对象添加方法， 函数在声明的时候不会立即执行的。（声明函数）

触发事件 ： 点击元素的时候，浏览器会自动捕捉到交互。 主动帮我们调用这个事件的方法。（调用函数）

事件类型

鼠标事件

onclick: 鼠标单击

ondblclick: 鼠标双击

onmouseenter: 鼠标移入 (以前: onmouseover)

onmouseleave: 鼠标移出 (以前: onmouseout)

onmousemove: 鼠标移动

键盘事件

oninput: 键盘输入 应用场景: 实时获取用户的内容 实时显示用户输入的数字: 如微博发布 实时显示用户搜索提示内容: 如京东搜索框

onfocus: 键盘成为焦点

onblur: 键盘失去焦点

onkeydown: 键盘按下 应用场景: 监听enter键,执行搜索功能

onkeyup: 键盘松开

网页事件

注册事件的时候是window,操作事件的时候是document.documentElement

window.onmousemove: 网页鼠标移动

window.onscroll: 网页滚动  document.documentElement.scrollTop: 网页滚动距离

window.onresize:网页尺寸变化  document.documentElement.clientWidth: 网页滚动距离

注册事件

点语法: 注册一个同名事件

注册: 事件源.事件类型=事件处理函数

移除: 事件源.事件类型=null

addEventListener: 可以注册多个"同名"事件

注册: 事件源.addEventListener('事件类型',事件处理函数)

移除: 事件源.removeEventListener('事件类型',事件处理函数)

事件对象

事件对象: 存储与事件相关的数据.

储存: 用户触发事件的时候,浏览器会自动捕捉触发时的鼠标(坐标点)和键盘信息(按键),并把相关数据存储到一个对象

获取事件对象: 给事件处理函数添加形参 event | ev | e

事件对象常用属性和方法

1. 阻止默认事件: e.preventDefault() 应用: 常用于a标签和form表单

2. 获取鼠标的触发点: e.pageX | e.pageY 应用: 获取鼠标的触发点到左上角的距离,用于盒子跟随鼠标移动

3. e.key: 获取按键字符串 'Enter' 常用于enter键: 'Enter'

4. e.keyCode: 获取按键ASCII码(每一个按键对应一个数字) 常用于enter键: 13

5. e.target: 获取真正点击的子元素(事件触发源)

6. e.stopPropagation(): 阻止事件的流动

事件冒泡

事件冒泡 ： 触发子元素事件，所有的父级元素‘同名事件’会被依次触发

事件委托

事件委托 ： 给父元素注册事件，委托子元素处理

事件委托原理： 事件冒泡

事件委托应用:

(1) 给动态新增的子元素注册事件

(2)性能优化 : 如果所有的子元素都需要注册"同名"事件,只需要给父元素注册

事件委托注意点: this指父元素 e.target: 真正触发的子元素 注册事件的父元素也不能是动态新增的

事件捕获

事件捕获: 与事件冒泡完全相反。触发子元素的事件时，会先从最顶级父元素window一级一级往下触发。

事件流三个阶段

事件流三个阶段: 获取事件阶段: e.eventPhase

(1)捕获阶段 (2)目标阶段 (3)冒泡阶段

阻止事件流动

阻止事件流动: 无论是冒泡还是捕捉都可以阻止（停止事件流）

e.stopPropagation()