一、dom注册事件的两种语法
1.点语法注册事件 : 事件源.事件类型 = 事件处理函数
* 特点: 无法注册 ‘同名事件’ , 后者覆盖前者
1.点语法注册事件 : 事件源.事件类型 = 事件处理函数
2.addEventListener() : 事件源.addEventListener('事件类型',事件处理函数)
* 特点: 可以注册 ‘同名事件’
2.addEventListener() : 事件源.addEventListener('事件类型',事件处理函数)
* @description:注册同名事件
* @param {string} 事件类型 不要on, click mouseenter
* @param {function} 事件处理函数
* @return:
具名函数的fn解读
fn: 变量取值。 取出的是fn的地址
n(): 函数调用。 取出的是fn的返回值
二、 阻止默认事件
1.默认事件： html中有少部分的标签自带点击事件. 例如: a标签、form标签
2.默认事件对开发影响: a标签和form标签,如果自己也注册了点击事件,则会（1）先执行注册的点击 （2）后自动执行默认点击跳转页面
3.阻止默认跳转应用 ： 如果想给a标签 或 form标签注册点击事件，就需要阻止默认跳转事件
(1)方式一: e.preventDefault()
(2)方式二: 设置a标签的href <a href="javascript:;"></a>
三.引用类型赋值
1.任何数据类型共同点（值类型，引用类型）
* 都有变量赋值特点
2.引用类型特点
* 数： 函数名()
* 数组： 数组名[下标]
* 对象： 对象名.属性名
//函数
let fn = function(){
alert(1111)
}
//引用类型也是数据类型，也拥有变量赋值的特点
let a = fn
//函数语法： 函数名()
let res = fn()//返回值undefined
//数组
let arr = [10,20,30]
//引用类型也是数据类型，也拥有变量赋值的特点
let arr1 = arr
//数组语法 ： 数组名[下标]
let num = arr[0]//10
//对象
let obj = {name:'张三',age:30}
//引用类型也是数据类型，也拥有变量赋值的特点
let obj1 = obj
//对象语法： 对象名.属性名
let name = obj.name//'张三'
console.log(fn,arr,obj)
console.log(a,arr1,obj1)
/* 高阶函数： 把函数作为参数 或 返回值 (函数也是数据类型，也可以赋值) */
function test(a){
console.log( a )
return function(){alert(1111)}
}
let res = test()
四、事件对象介绍
1.事件对象 : 存储与事件相关的数据
2.事件对象存储 : 当用户触发事件的时候,浏览器会自动捕捉触发相关的数据(鼠标坐标点、键盘按键)等信息,自动存入一个对象中，这个对象叫做事件对象
3.事件对象获取： 给事件处理函数添加形参 event ev e
4.件对象语法 ：
声明: 浏览器在触发事件的时候，自动存储触发数据（鼠标坐标、键盘按键）
取值: 给事件处理函数添加形参 e
5.事件对象常用属性和方法
e.pageX / e.pageY : 鼠标触发点到页面 左上角 距离
五、事件对象的总结
oninput : 键盘输入 (一般用于实时获取输入框'内容')
onfocus : 键盘成为焦点
onblur : 键盘失去焦点
onkeydown : 键盘按下( 一般用于获取按键 )
onkeyup : 键盘松开
2.如何获取用户按键
e.key : 按键字符串 确认键： 'Enter'
e.keyCode : 键盘ASCII码(键盘上的每一个按键对应一个数字，称之为ASCII码)
确认键ASCII码: 13
六、事件流和事件委托
1.事件冒泡 : 当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发
1.1 规则： 子元素->父元素->body->html->document->window
1.2 应用场景： 事件委托技术
2.事件委托应用 : 给‘动态新增’元素注册事件
2.1 什么是事件委托 : 给父元素注册事件，委托子元素处理
2.2 事件委托原理 : 事件冒泡
2.3 事件委托注意点 :
this : 不能使用。 this指向父元素
e.target : 推荐使用。 事件目标指向触发冒泡的子元素
/* 为什么动态新增元素无法注册事件：
(1)当页面加载的时候，这些元素并不存在。所以一开始根本获取不到
(2)动态新增元素，不知道它什么时候被创建，也不知道创建多少个
3.如何注册捕获类型事件 : 元素.addEventListener('事件类型',事件处理函数,true)
* 其他的方式如 点语法,addEventListener默认都是冒泡事件
小结：事件流的三个阶段
1.事件冒泡 : 当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发
1.1 规则： 子元素->父元素->body->html->document->window
1.2 应用场景： 事件委托技术
2.事件捕获 : 当触发子元素的事件时候，先从最顶级父元素，一级一级往里触发
1.1 规则： window->document->html->body->父元素->子元素
3.默认情况下，所有的注册事件都是冒泡事件。 只有唯一一种方式可以注册捕获事件：
元素.addEventListener('事件类型',事件处理函数,true)
4.事件流三个阶段： e.eventPhase
1-捕获阶段
2-目标阶段
3-冒泡阶段
5.阻止事件流动 ： e.stopPropagation()
* 写在哪个事件处理函数中，就从哪里开始阻止
