1. 事件类型
常用事件
鼠标事件：click(点击),dblclick(双击),mousedown(按下),mouseenter(移入),mouseleave(移出),
moursemove(移动),mouseout(移出), mouseover(移入),mouseup(松开)
焦点事件：blur(失去焦点), focus(获取焦点)
键盘事件：keydown(正按下), keypress(按下), keyup(松开)
文本事件：change(表单值变更), input(文本输入)
2. 事件绑定
DOM L0 旧写法：元素.on事件 = function(){...}
DOM L2 新写法：元素.addEventListener('事件', 函数) // addEventListener('click', function...)
备注：旧写法会覆盖原有事件。
3. 事件解绑
DOM L0 旧写法：元素.on事件 = null
DOM L2 新写法：元素.removeEventListener('事件', 函数名) // 匿名函数无法解绑
4. 事件对象与环境对象
4.1 环境对象
普通事件 this指向 window，
元素.addEventListener('事件', function() { this } ) // 这里的this返回调用元素的html
4.2 事件对象
元素.addEventListener('事件', function(e) { ...} ) // 参数e是事件对象，可获得window属性
5. 事件流
元素.addEventListener('click', function(){...}, true) // 第三个参数true是捕获，false默认冒泡可不写
5.1 捕获阶段（旧版DOM L0没有捕获阶段）
document > html > body > div ，捕获事件流，事件由上到下执行
div事件会使父级元素触发相同事件，由上到下触发。
5.2 冒泡阶段
div < body < html < document , 冒泡事件流，事件由下到上执行
div事件会使父级元素触发相同事件，由下到上触发。
5.3 阻止冒泡（也可阻止捕获）
元素.addEventListener('click', function(){ this.stopPropagation() })
5.4 阻止默认行为
元素.addEventListener('click', function(e){ e.prientDefault() })
例如：submit的超链接点击可以阻止不触发
5.5 鼠标经过
mouseover, mouseout有冒泡效果
mouseenter, mouseleave 没有冒泡效果，推荐使用
6. 事件委托
给父元素绑定事件，使子元素全可以触发
父元素.addEventListener('click', function(e){ this(父), e.target(子) })
e.target.targetName可获取子元素标签名，用来判断是否加事件。
console.dir(元素) // 可控制台打印出对象
7. 页面加载事件
7.1 JS写在HTML之前，无法获取表单元素。可指定页面加载完再执行JS
window.addEventListener('load', function()...)
7.2 其他元素的加载：如：img.addEventListener('load', fun...) // 图片加载完处理
7.3 document.addEventListener('DOMContentLoaded', fun...) // HTML加载完成处理无需等待图片样式加载
8. 滚动事件
window.addEventListener('scroll', fun...) // 页面滚动
document.documentElement.scrollTop // 页面卷去的上部，看不见部分
document.documentElement.scrollLeft // 页面卷去的左部，看不见部分
元素.addEventListener('scroll', fun...) // 有滚动条的元素滚动
元素.scrollTop // 元素卷去的上部，看不见部分
元素.scrollLeft // 元素卷去的左部，看不见部分
备注：为scrollTop，或scrollLeft 赋值，可使滚动条跳到指定位置。
9. 日期时间
获取当前时间 const date = new Date()
指定时间 const date = new Date('2021-03-24')
date.getYear, getMonth等获取年月日时分秒。