不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
1.事件交互 三要素
(1)事件源 ->什么元素
(2)事件类型 ->什么时刻
(3)事件处理函数
2.注册事件
(1)事件源.事件类型=事件处理什么函数
例子:box.onclick=function(){}
*特点不能注册同名事件,会被覆盖
(2)事件源.addEventListener('事件类型',事件处理函数
特点可以注册'同名时间'依次触发
3.事件注意点
(1)事件注册时不会运行 / 函数注册时不会运行
(2)用户触发事件,浏览器捕捉交互,自动帮我们调用事件处理函数（浏览器自动调用函数）
4.阻止事件
(1).html中有部分标签自带点击事件 :form表单,a标签
(2).如果给这些标签注册点击事件，会默认跳转
(3). 阻止默认事件 ：执行自己注册的事件
e.preventDefault()
(4)两种方式:
1>设置:javascript:; 例如: <a href="javascript:">
2> e.preventDefault()
5.事件类型
(1)鼠标单击:onclick
(2)鼠标双击:ondblclick
(3)鼠标移入:onmouseenter
(4)鼠标双移入:onmouseleave
(5)鼠标移动:onmousemove
6.事件对象
(1)事件对象 : 是存储与事件相关的对象。
*当用户触发事件的时候，浏览器会自动捕捉触发时(鼠标坐标和键盘按键)的信息,存入对象中这个对象称之为事件对象。
(2)如何获取事件对象: 给事件处理函数添加形参 event ev e
(3)事件对象常用属性: e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离*/
7.键盘事件
(1)键盘事件总结:
oninput:键盘输入(一般用于事实获取输入框 内容)
onfocus:键盘成为焦点
onblur:键盘失为焦点
onkeydown:键盘按下(一般用于获取按键)
onkeyup:键盘松开
(2)如何获取用户按键
e.key:按键字符串 确认键: 'Enter'
e.keyCode:键盘ASCII码(键盘上的每一个按键对应的每一个数字,称之为ASCII码)
确认键ASCII码":13
8.事件流与事件委托
(1)事件冒泡:
事件冒泡:触发子元素的事件,父元素的 '同名事件' 会被 依次触发
子元素->父元素->body->html->document->window
9.网页特效
(1)offset家族 获取'自身'的宽高与位置
元素.offsetWidth/元素.offsetHeight width+padding+border
元素.scrollLeft/元素.offsetTop 自身到定位父元素 左/上 内边框距离
(2)scroll家族
元素.scrollWidth / 元素scrollHeight 内容宽高
元素.scrollLeft / 元素scrollTop 内容位置 : 滚动条滚动的距离
应用 :1>固定导航 2>回到顶部 设置页面scrollTop为0
(3)client家族 获取元素'可视区域'宽高与位置
元素.clientWidth/元素clientHeight 视口大小
元素.clientLeft/元素clientTop 左边框和上边框高度
应用:响应式(横竖屏适配)
