##onmousewheel
滚轮事件就是随着滚轮滚动发生变化,但是火狐不支持
兼容火狐:使用DOMMouseScroll来绑定事件,需要通过addEventListener()函数来绑定。
使用addEventListener()方法绑定响应函数时,取消默认行为不能使用renturn false,要使用event.preventDefault()来取消(但是IE8不支持)。
wheeldelta 用来获取滚轮滚动的方向:正值向上滚,负值向下滚
在火狐中,使用event.detail来获取滚动方向:负值向上滚,正值向下滚
小例子:随滚轮滚动变化长度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
//滚轮向下滚,div变长;向上滚,变短
window.onload = function(){
var box1 = document.getElementById("box1");
/*
* 给box1绑定滚轮滚动响应函数
* onmousewheel 随着滚轮滚动发生变化,但是火狐不兼容
* 火狐要使用DOMMouseScroll来绑定,
* onMouseScroll需要使用addEventListener()来绑定
* 使用bind函数
*/
box1.onmousewheel = function(event){
event = event || window.event;
//使用wheelDelta获取滚轮滚动方向 (只看大小,不看方向
//正值向上滚,负值向下滚
//兼容火狐使用 event.detail
// 正值向下滚,负值向上滚
if(event.wheelDelta > 0 || event.detail < 0){
//向上滚变短
box1.style.height = box1.clientHeight - 10 +"px";
}else{
//向下滚变长
box1.style.height = box1.clientHeight + 10 +"px";
}
};
bind(box1 , "DOMMouseScroll" , box1.onmousewheel);
//创建bind函数绑定对象
/*
* 参数:
* obj:要绑定事件的对象 eventStr:事件的字符串(不要"on") callback:回调函数
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
/*addEventListener()
* 参数: 1、事件的字符串(不要on
* 2、回调函数
* 3、是否在捕获阶段触发事件
* 当事件触发时,响应函数会按照函数的绑定顺序执行
* IE8以下不支持
*/
obj.addEventListener(eventStr , callback , false);
}else{
/*obj.attachEvent()
* 参数: 1.事件字符串(要on
* 2.回调函数
* 先绑定后执行,顺序和addEventListener()相反
* 支持IE8以下
*/
//obj.attachEvent("on"+eventStr , callback);
/*
*addEventListener()中的this是绑定事件的对象,
* attachEvent()中的this是window
* 需要统一两个方法
*/
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call();
});
}
}
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
##键盘事件
onkeydown 按键被按下(如果一直按着不松手,时间会一直被触发;当它连续触发时,第一次和第二次之间的时间会稍长,后面会很快,这是为了防止误操作)
onkeyup 按键被松开
一般会绑定给一些可以获取到焦点的对象(表单项)或者document上
keyCode可以获取到按键编码,(可以判断哪个键被按下)
altKey 、 ctrlKey、shiftKey可以判断Alt、Ctrl、shift键是否被按下,若按下,返回true,没有则返回false。
当在文本框中输入内容,内容显示在文本框中属于onkeydown的默认行为,如果在onkeydown中取消默认行为(return false),则输入的内容不会出现在文本框中。
例:让div根据上下左右键移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
document.onkeydown = function(event){
event = event || window.event ;
//定义一个速度变量
var speed = 10;
//当按下Ctrl键时,速度变快
if(event.ctrlKey){
speed = 100;
}
//console.log(event.keyCode);
//←:37 ↑:38 →:39 ↓:40
/* if(event.keyCode === 37){//左
box1.style.left -= 50 +"px";
}else if(event.keyCode === 39){//右
box1.style.left += 50 +"px";
}else if(event.keyCode === 38){//上
box1.style.top -= 50 +"px";
}else if(event.keyCode === 40){//下
box1.style.top += 50 +"px";
}*/
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>
</html>