websAPI（六）——鼠标事件和offset属性
（一）扩展事件
1.onmouseover和onmouseout
鼠标进入和鼠标离开事件
onmouseover和onmouseout默认支持事件冒泡。要用事件委托时推荐使用。
onmouseenter和onmouseleave不支持冒泡。不考虑事件委托时使用。
2.onload页面加载事件
表示页面加载完毕（所有资源：包括图片、视频、饮品等其他外联资源）后要执行的程序
代码举栗：
<script>
window.onload = function() {
var btn = document.querySelector('button');
console.log('2'); //其他程序执行完毕后才打印2
};
</script>
3.screen
screen.width 获取屏幕横向分辨率
screen.height 获取屏幕纵向分辨率
screen.availHeight 获取屏幕的高度，不包括最下工具栏
（二）元素的offset系列属性
1.offsetWidth和offsetHeight
无法通过元素.style.样式属性名获取内部和外联的样式值，但是可以获取行内样式值，返回一个字符串。
元素.offsetWidth;和元素.offsetHeight;返回的是数字。大小包括内容+padding+border。
代码举栗：
<script>
var div = document.querySelector('div');
console.log(div.offsetWidth);
console.log(div.offsetHeight);
</script>
offsetWidth和offsetHeight是只读的，不能设置。
2.offsetLeft和offsetTop
元素.offsetLeft; 元素.offsetTop; 返回的是数字
代码举栗：
<body>
<div class="f">
<div class="s"></div>
</div>
<script>
var s = document.querySelector('.s');
console.log(div.offsetLeft);
console.log(div.offsetTop);
</script>
</body>
若元素没有定位时，获取的位置参照的时页面。（即元素在页面中的位置时多少）
若元素有定位（子绝父相定位），获取的位置参照的起点是上级元素。
放大镜案例：
<body>
<div class="w">
<div class="fdj">
<div class="leftBox" id="_leftBox">
<!-- 小图 -->
<img src="img/m.jpg" alt=""/>
<!-- 小黄盒子 -->
<div class="tool" id="_tool"></div>
</div>
<div class="rightBox" id="_rightBox">
<img id="_bImg" src="img/b.jpg" alt=""/>
</div>
</div>
</div>
<!-- 引入的外部js程序文件 -->
<script src="js/index.js"></script>
</body>
<script>
var leftBox = document.querySelector('.leftBox');
var tool = document.querySelector('.tool');
var rightBox = document.querySelector('.rightBox');
var bigImg = document.querySelector('#_bImg');
leftBox.onmouseenter = function() {
tool.style.display = 'block';
rightBox.style.display = 'block';
};
leftBox.onmouseleave = function() {
tool.style.display = 'none';
rightBox.style.display = 'none';
};
leftBox.onmousemove = function(e) {
var x = e.pageX - this.offsetLeft - tool.offsetWidth/2;
var y = e.pageY - this.offsetTop - tool.offsetHeight/2 ;
if(x < 0) {
x = 0;
}
if(x > this.offsetWidth - tool.offsetWidth) {
x = this.offsetWidth - tool.offsetWidth;
}
if(y < 0) {
y = 0;
}
if(y > this.offsetHeight - tool.offsetHeight) {
y = this.offsetHeight - tool.offsetHeight;
}
tool.style.left = x + 'px';
tool.style.top = y + 'px';
bigImg.style.left = -2 * x + 'px';
bigImg.style.top = -2 * y + 'px';
}
</script>
3.offsetParent
<body>
<div class="f">
<div class="s"></div>
</div>
<script>
var s = document.querySelector('.s');
console.log(s.parentNode); //获取到父元素f
console.log(s.offsetParent); //获取到body
</script>
</body>
parentNode获取上级直接的父元素，从标签嵌套关系观察
offsetParent获取上级的参照位置的“父”元素，从定位关系观察
（三）元素的client属性
1.clientWidth和clientHeight
元素.clientWidth; 元素.clientHeight;
获取元素的大小，包含内容+padding
2.clientLeft和clientTop
元素.clientLeft; 元素.clientTop; 获取边框的厚度
（四）scroll系列属性
1.scrollWidth和scrollHeight
元素.scrollWidth; 元素.scrollHeight;
获取元素的大小，包含内容+padding+溢出部分大小
2.scrollLeft和scrollTop
有滚动条时，被卷去的页面间距
若滚动条在窗口上时，事件注册给window
若获取被卷去的页面间距，但滚动条在窗口上时，并且事件注册给window，不要使用window调用scrollTop。
