BOM2（bom事件）

PC端事件
移动端事件

PC端事件	事件	解释
页面载入完成后触发	load	全部加载完毕后执行
页面载入完成后触发	DOMcontentLoaded	加载html后执行
调整浏览器窗口大小后触发	resize
浏览器滚动条移动时触发	scroll

PC端事件

页面载入完成后触发
(1)window.addEventLisitener（“load”，function( ){ }）
(2)window.addEventLisitener（"“DOMcontentLoaded”"，function( ){ }）

1. 页面载入时触发事件
2. （1）是页面全部加载完毕后执行，（2）是先加载html就执行，后加载css，图片，falsh
3. 可将js文件打包到此函数中，不会出现js执行顺序问题
4. 注意：火狐特性"往返缓存"，解决方法xmind

调整浏览器窗口大小后触发
(1)window.addEventLisitener（“resize”，function( ){ }）

1. 完成响应式布局

移动端事件

触摸事件
(1)window.addEventLisitener（“touchstart”，function( ){ }）手指按下时
(1)window.addEventLisitener（“touchmove”，function( ){ }）手指先按下在移动时
(1)window.addEventLisitener（“touchend”，function( ){ }）手指离开时
触摸事件对象

（1）得到手指头列表（多个时）
e.touches[0]：触摸屏幕：得到所有手指头的触摸点列表
e.targetTouches[0，1，2]：触摸获取的DOM元素：得到所有手指头的触摸点列表
e.changedTouches[0]：原来没有这个手指，有了后记录，原来有这个手指，没有了后记录
（2）得到手指头后取其坐标：var lzy = e.targetTouches[0].pageX
（3）阻止（屏幕滚动的）默认行为:e.preventDefault（ ）

移动端拖动原理

1. 触摸元素时：获取手指初始坐标，获取盒子初始位置坐标
2. 移动元素时：计算手指滑动距离，移动盒子并且阻止屏幕滚动
3. 离开元素

盒子最终的位置=盒子原来的位置+手指移动的距离
手指移动距离=手指滑动后的位置-手指刚触摸的位置