今天学习了几个基本的事件问题,鼠标滚轮事件,用键盘控制div移动,键盘事件,比如可以禁用从键盘输入时,输入框不接受某些数字或者字母。拖拽div,定时器。
鼠标滚轮事件
//鼠标滚轮事件
<style> #box1{ width: 100px; height: 100px; background-color: red; } body{ height: 2000px; } </style> <script> window.onload = function(){ let box1 = document.getElementById("box1"); box1.onmousewheel = function(event){ event = event || window.event; if(event.wheelDelta>0 || event.detail<0){ box1.style.height = box1.clientHeight - 10 +"px"; }else{ box1.style.height = box1.clientHeight + 10 +"px"; } event.preventDefault && event.preventDefault(); return false; }; bind(box1,"DOMMouseScroll",box1.onmousewheel); }; function bind(obj ,eventStr , callback){ if(obj.addEventListener){ // 大部分浏览器的兼容方式 obj.addEventListener(eventStr , callback ,false); }else{ // this是谁由调用方式决定 // IE8及以下 obj.addEventListener("on"+eventStr,function(){ callback.call(obj); }); } }; </script> </head> <body> <div id="box1"></div> </body>
用键盘控制div移动
//用键盘控制div移动
<style> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script> window.onload = function(){ document.onkeydown =function(event){ event = event || window.event; let speed =10; if(event.ctrlKey){ speed = 50; } //37左38上39右40下 switch(event.keyCode){ case 37: box1.style.left = box1.offsetLeft -speed +"px"; break; case 38: box1.style.top = box1.offsetTop -speed +"px"; break; case 39: box1.style.left = box1.offsetLeft +speed +"px"; break; case 40: box1.style.top = box1.offsetTop +speed +"px"; break; } }; }; </script> </head> <body> <div id="box1"></div> </body>
键盘事件
<script> window.onload = function(){ document.onkeydown = function(){ event = event || window.event; if(event.keyCode === 89 && event.ctrlKey){ console.log("ctrl和y都被按下"); } }; // document.onkeyup = function(){ // }; let input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ event = event || window.event; if(event.keyCode>=48 && event.keyCode<=57){ return false; } }; }; </script> </head> <body> <input type="text"> </body>
div拖拽
<style> #box1{ height: 100px; width: 100px; background-color: red; position: absolute; } #box2{ height: 100px; width: 100px; background-color: yellow; position: absolute; top: 100px; left: 100px; } </style> <script> window.onload = function(){ let box1 = document.getElementById("box1"); drag(box1); drag(box2); //提取一个专门用来拖拽的函数 function drag(obj){ obj.onmousedown = function(event){ event = event || window.event; let ol = event.clientX - obj.offsetLeft; let ot = event.clientY - obj.offsetTop; document.onmousemove = function(event){ event = event || window.event; let left = event.clientX-ol; let top = event.clientY-ot; obj.style.left = left + "px"; obj.style.top = top +"px"; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; //取消默认行为 return false; }; }; }; </script> </head> <body> <div id="box1"></div> <div id="box2"></div> </body>
定时器,比如图片轮播图时候就可以使用。
setInterval(function(){
index++;
//如果index计数器大于了图片数量将重新开始 if(index>=imgArr.length){ index=0; }
img.src = imgArr[index]; },2000);//时间两秒钟一次