JavaScript基础回顾知识点记录7-事件补充说明2

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 中键盘事件

onkeyup - 键盘松开
onkeydown - 键盘按下
event.keyCode - 键盘按键的编码（eg: 37- 左、38 - 上、39 - 右、40 - 下）

键盘移动div元素

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        #box1 {
            height: 100px;
            width: 100px;
            background-color: #00FFFF;
            position: absolute;
        }
    </style>
    <body>
        <div id="box1">

        </div>
    </body>
    <script type="text/javascript">
        var box1 = document.getElementById('box1');
        // 每次按下位移的距离
        var move_mile = 10;
        document.onkeydown = function(e) {
            // 当用户按了ctrl后，加速
            if (event.ctrlKey) {
                move_mile = 50;
            }
            switch (e.keyCode) {
                case 37:
                    box1.style.left = box1.offsetLeft - move_mile + "px";
                    break;
                case 38:
                    box1.style.top = box1.offsetTop - move_mile + "px";
                    break;
                case 39:
                    box1.style.left = box1.offsetLeft + move_mile + "px";
                    break;
                case 40:
                    box1.style.top = box1.offsetTop + move_mile + "px";
                    break;
            }
        }
    </script>
</html>

posted @ 2022-08-26 08:48 土dog的填充之路阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

埋头苦赚:)

JavaScript基础回顾知识点记录7-事件补充说明2

公告