事件介绍及注册事件
1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div p）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
- 事件源.事件类型 = 事件处理函数
- box.onclick = function(){}
4.事件工作原理
- a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
- b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
5.页面中 任何元素都可以注册很多个事件(点击，移入等)
事件知识点补充
addEventListener注册事件(如何给一个元素添加多个相同事件)
1.点语法注册事件: 事件源.事件类型 = 事件处理函数
* 特点：不能注册‘同名事件’， 否则会覆盖
2.事件源.addEventListener('事件类型',事件处理函数)
* 特点：可以注册‘同名事件’，依次触发
removeEventListener移除事件
- 移除事件 : 参数与addEventListener一致
- 注意点： 只能移除具名函数， 无法移除匿名函数
阻止默认事件
1.html中有部分标签自带点击事件 ： form表单,a标签
2.如果给这些标签注册点击事件，会默认跳转
3. 阻止默认事件 ： 执行自己注册的事件
e.preventDefault()
事件对象
1-事件对象介绍
1.事件对象 ：存储与事件触发相关信息(事件触发点，键盘信息)的对象
2.获取事件对象 ： 给事件处理函数添加一个形参 event ev e
2-事件对象常用属性
事件对象常用属性： e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离
3-键盘事件及获取按键
1.键盘事件总结
onfocus : 成为键盘焦点
onblur : 失去键盘焦点
oninput : 键盘输入
* 实时获取输入内容
onkeydown : 键盘按下
* 监听enter键
onkeyup : 键盘松开
2.如何获取用户按键
e.key : 获取字符串 'Enter'
e.keyCode : 获取键盘码ASCII码 13
* 键盘上每一个按键对应一个数字，称之为ASCII码
事件流与事件委托
1-事件冒泡介绍
事件冒泡： 当触发子元素的事件时，该子元素的所有“父级元素” 的“同名事件”会依次触发
- 事件冒泡现象一直都存在，只是以前没有给父元素注册同名事件
- 子元素 -> 父元素 -> body -> html -> document -> window
2-事件委托（重点）
事件委托： 给父元素注册事件,委托子元素来处理
2.1 事件委托原理：事件冒泡
2.2 事件委托注意点 ： 不能使用this
this: 事件源，指向父元素
e.target: 事件触发源，指向具体触发这个事件委托的子元素
3-事件捕获(了解)
1.事件捕获 ： 与事件冒泡完全相反。触发子元素的事件时，会先从最顶级父元素window一级一级往下触发。
window -> document -> html -> body -> 父元素 -> 子元素
2.默认情况下注册的事件都是冒泡类型事件，只有唯一的一种语法可以注册捕获类型事件
addEventListener() ： 第三个参数为true
4-事件流三个阶段
- 事件捕获
- 事件目标
- 事件冒泡
5-阻止事件流动
阻止事件流动: e.stopPropagation()
- 无论是冒泡还是捕捉都可以阻止（停止事件流）
