鼠标事件

• click 单击
• dblclick 双击
• mousedown 单击按下
• mouseup 单击松开。按下后松开触发click
• contextmenu 单击右键
• mousemove 鼠标移动
• mouseenter、mouseleave 鼠标进入和移除触发，碰到子元素不触发，更常用
• mouseover、mouseout 鼠标进入和移出触发，碰到子元素也触发

mouseenter和mouseover的区别在于

    <div class="parent">
        <div class="child"></div>
    </div>
		$('.parent').onmouseover = function() {
            console.log('parent mouseover');
        }
		$('.parent').onmouseenter = function() {
            console.log('parent mouseenter');
        }

mouseover支持事件冒泡，mouseenter不支持事件冒泡，因此 当鼠标在parent的子元素来回切换时，mouseenter和mouseleave是不触发的，但mouseover和mouseout会触发

上面代码中，鼠标在进入parent后再进入child的时候也会触发mouseover，mouseenter则不会触发

键盘事件

• keyup/keydown 键盘按下/松开

滚动事件

• scroll 滚动时触发 容器设置overflow: scroll

相关API有：

• node.scrollTo 滚动到哪里
• node.scrollBy 滚动多少
• node.scrollTop 滚动距离
• node.scrollInto

    <div class="wrap">
        <p>项目1</p>
				$*30
    </div>
    .wrap{
        height: 200px;
        overflow-y: scroll;
    }
    const $ = s => document.querySelector(s)
        $('.wrap').scrollTo({top : 100,behavior:'smooth'} )			//页面默认滚动高度
        $('.wrap').onscroll = function() {
            console.log(this.scrollTop);			//显示当前滚动高度
        }
        document.onkeydown = function(e){
            if(e.key === 'w'){
                $('.wrap').scrollBy(0, 50)		//每次上下滚动50px
            }
            if(e.key === '2') {
                $('.wrap').scrollTo(0, 200)		//立即滚动到top 200px
            }
        }

表单事件

• blur 失去焦点
• focus 获得焦点
• input 每次键盘键入内容时触发
• change 表单内容改变且失去焦点 change也适用于file、select
• submit 表单提交时

加载事件

• DOMContentLoaded DOM结构解析完成后触发该事件（即html解析完成后

DOMContentLoaded事件 只能用 addEventListener 添加

• window.onload 页面所有资源加载完成
• img.onload 图片加载后获取宽度

DOMContentLoaded 和 window.onload 的区别在于，前者只需要页面的骨架加载完成即可触发，后者需要页面所有资源加载完成才可触发

        document.addEventListener('DOMContentLoaded', function(e) {
            console.log('html加载完成');
        })
        window.onload = (e) => {
            console.log('所有资源加载完成');
            console.log(1);
        }
        $('img').onload = (e) => {
            console.log('图片加载完成');
        }

上面代码的执行顺序为：图片、html、所有资源