dom注册事件特点

点语法注册

事件源 . 事件类型 = 事件处理函数（不能注册同名事件，后面的会覆盖前面的）

addEventListener

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

特点：可以注册多个‘同名事件’，依次触发

点语法移除事件，赋值null

box.onclick = null

移除事件 : 参数与addEventListener一致

/* 注意点：只能移除具名函数，无法移除匿名函数 */

box.addEventListener('click', fn )

fn : 取出函数堆地址（函数也是一种数据类型，也可以像变量一样赋值）

fn() : 调用函数，作用是执行函数体，并得到返回值

阻止默认事件（ e.preventDefault()）

html中有部分标签自带点击事件： form表单,a标签
如果给这些标签注册点击事件，会默认跳转
阻止默认事件：执行自己注册的事件

事件对象

事件对象：是存储事件相关数据的对象

用户触发事件的时候，浏览器会自动捕捉触发时候的（鼠标与键盘）数据，存入一个对象中，这个对象就叫做事件对象

事件对象获取：事件处理函数添加形参

事件对象常用属性 :

e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离

键盘事件

onfocus	成为键盘焦点
onblur	失去键盘焦点
oninput	键盘输入
/* 实时获取输入内容
onkeydown	键盘按下
/*监听enter键
onkeyup	键盘松开

获取按键

e.key : 获取字符串 'Enter'
e.keyCode : 获取键盘码ASCII码 13

         3. / * 键盘上每一个按键对应一个数字，称之为ASCII码 */

事件冒泡

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

子元素->父元素->body->html->document->window

应用场景：事件委托技术

事件捕获

事件捕获：当触发子元素的交互。先从外层父元素一级一级往里触发。

子元素->父元素->body->html->document->window
事件流的三个阶段： e.eventPhase
1. 事件捕获
2. 事件目标
3. 事件冒泡

事件委托

事件委托 : 给父元素注册事件, 委托给子元素处理

事件委托原理 : 事件冒泡

事件委托注意点 :

不能使用 this ： this指向父元素

需要使用 e.target : 真正点击的子元素（事件触发源）

事件委托的应用：给动态新增元素注册事件

     document.querySelector('ul').onclick = function(e){
         /* 
         this : ul
         e.target : 真正点击的子元素
         */
        console.log( e.target )

元素.classList.contains(类名)：元素的父亲的类名是否和括号里的相同，可以用来判断

阻止事件流动（e.stopPropagation()）

作用：使用后可以对冒泡事件跳过该元素

     document.querySelector('.father').addEventListener('click',function(e){
         alert('我是红色父元素'+ e.eventPhase )
         e.stopPropagation()
       },false)

三大家族

offset家族

作用：获取元素‘自身’真是宽高与位置

offsetWidth/offsetHeight: 真实宽度 = width+border+padding
offsetLeft/offsetTop 自身左/上外边框到定位父元素左上内边框距离

scroll家族

作用：获取‘元素内容’真实宽高与位置

scrollWidth / scrollHeight : 获取内容的宽高
scrollLeft / scrollTop : 内容的位置（就是滚动条滚动的距离）
应用：一般网页的头部变成固定定位和标准流

client家族

作用：获取元素 ‘可视区域’ 宽高和位置

clientWidth / clientHeight : 可视区域大小
clientLeft / clientTop : 可视区域位置（就是左边框和上边框宽度）
应用：判断不同尺寸的屏幕适配、横屏和竖屏判断

获取网页滚动距离

给页面注册滚动事件（window.onscroll）因为该事件实在window中滚动，所以要给window中注册事件
获取页面滚动的距离：html标签的scrollLeft
document.documentElement表示document的根元素，也就是表示html
页面事件：
1. 页面移动：window.onmousemove
2. 页面滚动：window.onscroll
3. 页面大小变化：window.onresize

BOM

js组成

ECMAScript对象：（array，object,Math,Date）
DOM(document) ：网页中的内容
BOM ：浏览器的窗口

window对象

window对象 : 是js中的顶级对象, 所有的全局方法和属性都是window对象的成员

只要是window对象的成员，使用时一律可以省略window
方法：
1. 打开窗口 window.open()
2. 关闭窗口 window.close()
事件：
1. window.onload = function(){}加载事件： DOM树 + 外部资源加载完毕后执行
  
  优势：如果图片尺寸过大，图片不能及时加载，log就会直接打印出来，导致图片高度不正确，使用onload可以解决这个问题，他会等DOM树和外部资源加载后在执行
  
  示范：
```
     window.onload = function () {
             let box = document.querySelector('.box')
             console.log(box.scrollWidth, box.scrollHeight)
         }
```
2. window.onbeforeunload = function(){}关闭事件：页面关闭之前执行（存储数据）

对象

location对象：

location对象：浏览器地址栏url
重点：修改localtion对象的href，可以实现网页的跳转
区别：
- a标签的href是用于无条件渲染，无逻辑性，点击100%跳转，可以应用在：订单、商品详情
- location的href是有条件跳转，有逻辑性，点击需要有满足条件，才跳转，应用于：账号登良等
三个方法：
1. location.assign('url') : 跳转（可以回退）
2. location.replace('url') : 替换（不可以回退）
3. location.reload('url') : 刷新（相当于电脑中的F5）

history对象：

history对象：历史记录
三个方法：
1. history.back() : 返回上一页
2. history.forward() : 前进下一页
3. history.go(数字) :数字负数就是回退几页，正数就是前进几页

navigator对象：

navigator对象：用户信息
应用：收集用户信息，不同的手机不同的价格

screen对象：

screen : 用户电脑屏幕（不常用）
一般用于开发游戏里面，询问用户分辨率过低，是否需要调整

存储对象

localStorage

localStorage：本地储存
应用：免登陆
语法：
1. 存数据：localStorage.setItem（‘属性名’，属性值）
2. 取数据：localStorage.getItem('属性名')
3. 删数据：lacalStorage.removeItem('属性名')
4. 清空数据：localStorage.clear( )
每个网站的localStorage都是独立的
注意：
1. localStorage是永久存储，除非手动清除，否则一直存在
2. 只能存储字符串

示范：

     //存数据 ：  localStorage.setItem('属性名',属性值)
     document.querySelector('.setItem').onclick = function () {
             localStorage.setItem('name', 'admin')
             localStorage.setItem('age', '18')
             localStorage.setItem('city', 'China')
             localStorage.setItem('sex', '男')
         }
         //取数据 ：  localStorage.getItem('属性名')
         document.querySelector('.getItem').onclick = function () {
 
             console.log(localStorage.getItem('name'))
         }
         // 删数据 :   localStorage.removeItem('属性名')
         document.querySelector('.removeItem').onclick = function () {
             localStorage.removeItem('age')
         }
 
         //清空数据 : localStorage.clear()
         document.querySelector('.clear').onclick = function () {
             localStorage.clear()
         }

sessionStorage

sessionStorage：本地储存
应用：页面间传值，常见于移动端
语法：
1. 存数据：sessionStorage.setItem（‘属性名’，属性值）
2. 取数据：sessionStorage.getItem('属性名')
3. 删数据：sessionStorage.removeItem('属性名')
4. 清空数据：sessionStorage.clear( )
每个网站的sessionStorage都是独立的
注意：
1. sessionStorage是临时存储，只要页面一关闭，数据就自动清空了
2. 只能存储字符串，如果是其他类型，编译器会自动帮你转成字符串后存储

localStorage与SessionStorage异同点

相同点：作用一致，都是用于存储数据
不同点：存储方式不同
- localStorage：硬盘存储
- sessionStorage：内存存储

JSON格式

作用：解决数据跨平台兼容性是一种数据格式，本质字符串
可以解决：js中使用localStorage存储对象，来做免登陆等

语法：

json -> js : let jsObj = JSON.parse( json格式 )
js -> json : let jsonStr = JSON.stringify( js对象 )

     // JSON格式字符串
         let jsonobj = '{"name":"张三","age":"18","sex":"男"}'
         console.log(jsonobj)
         // JSON变js
         let json = JSON.parse(jsonobj)
         console.log(json)
         // js对象变JSON
         let obj = {
             name: '张三',
             age: 20,
             sex: '女'
         }
         let jsons = JSON.stringify(obj)
         console.log(jsons)

DOM事件的方法