标签：知识点 style JavaScript 回顾 px move mile box1 event
- js 中 鼠标滚轮事件
- offsetWidth/offsetHeight - 对象的可见宽度/高度
- clientWidth/clientHeight - 内容的可见宽度/高度
- scrollWidth/scrollHeight - 元素完整的高度和宽度，overflow:hidden的部分也计算在内。
- offsetLeft/offsetTop - 当前元素距浏览器边界的偏移量，以像素为单位
- clientTop/clientLeft - 当前元素上边框、左边框的宽度
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#box1 {
height: 100px;
width: 100px;
background-color: #7FFFD4;
}
</style>
<body style="height: 2000px;">
<div id="box1">
</div>
</body>
<script type="text/javascript">
window.onload = function() {
/*
上次讲的兼容不同浏览器绑定事件的封装方法
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
obj.addEventListener(eventStr, callback, false);
} else {
obj.attachEvent(eventStr, callback);
}
}
/*
onmousewheel 鼠标滚轮事件， 火狐浏览器不支持
在火狐中使用 DOMMouseScroll 来绑定滚轮事件，该事件需要使用addEventListener()绑定
event.wheelDelta可以获取鼠标滚轮的方向,向上滚正值，向下滚负值
但是火狐中不支持，需使用event.detail，向下滚正值，向上滚负值
*/
var box1 = document.getElementById('box1');
box1.onmousewheel = function(e) {
e = e || window.e;
if (e.wheelDelta > 0 || e.detail < 0) {
box1.style.height = box1.clientHeight - 10 + 'px';
} else {
box1.style.height = box1.clientHeight + 10 + 'px';
}
/*
使用addEventListener()方法绑定，不能使用return false 取消默认行为
需要使用 event.preventDefault(); 但是在IE8中不能使用
*/
e.preventDefault && e.preventDefault();
/*
当滚轮滚动时，如果浏览器有滚动条，则滚动条会随之发生滚动
这属于浏览器默认行为，可以取消默认行为
*/
return false;
}
bind(box1, "DOMMouseScroll", box1.onmousewheel);
}
</script>
</html>
- js 中 键盘事件
标签：知识点,
style,
JavaScript,
回顾,
px,
move,
mile,
box1,
event
From： https://www.cnblogs.com/study-hmz/p/16626412.html