本文详细介绍了JavaScript中的滚轮事件、键盘事件、事件句柄、事件类型和属性。通过实例代码展示了如何监听滚轮滚动改变div高度、键盘事件处理、以及阻止默认行为。同时，讲解了window对象的Navigator属性，以及BOM（浏览器对象模型）中的window对象、Navigator对象和History对象的基本用法。
目录
滚轮的事件
完整代码
<!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">
window.onload=function(){
/*
* 当鼠标滚轮向下滚动时，box1变长
* 当滚轮向上滚动时，box1变短
*/
//获取id为box1的div
var box1=document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动的事件
/*
* onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
* 但是火狐不支持该属性
*
* 在火狐中需要使用DOMMouseScroll来绑定滚动事件
* 注意该事件需要通过addEventListener()函数来绑定
*/
box1.onmousewheel=function(){
//判断鼠标滚轮滚动的方向
//event.wheelDelta可以获取鼠标滚轮滚动的方向
//向上滚120 向下滚-120
//wheelDelta这个值我们不看大小，只看正负
//alert(event.wheelDelta);
//wheelDelta这个属性火狐中不支持
//在火狐中使用event.detail来获取滚动的方向
//向上滚-3 向下滚3
//alert(event.detail);
/*
* 当鼠标滚轮向下滚动时，box1变长
* 当滚轮向上滚动时，box1变短
*/
//判断鼠标滚轮滚动的方向
if(event.wheelDelta>0||event.detail<0){
//向上滚，box1变短
box1.style.height=box1.clientHeight-10+"px";
}else{
//向下滚，box1变长
box1.style.height=box1.clientHeight+10+"px";
}
/*
* 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventDefault();
* 但是IE8不支持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是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
</body>
</html>键盘事件
事件句柄
| 事件 | 当...时发生 |
|---|---|
| onabort | 用户终止页面加载。 |
| onblur | 用户离开对象。 |
| onchange | 用户改变对象的值。 |
| onclick | 用户点击对象。 |
| ondblclick | 用户双击对象。 |
| onfocus | 用户激活对象。 |
| onkeydown | 按下键盘。 |
| onkeypress | 按压键盘。 |
| onkeyup | 松开键盘。 |
| onload | 页面完成加载。 注释：在 Netscape 中，当页面加载时会发生该事件。 |
| onmousedown | 用户按鼠标按钮。 |
| onmousemove | 鼠标指针在对象上移动。 |
| onmouseover | 鼠标指针移动到对象上。 |
| onmouseout | 鼠标指针移出对象。 |
| onmouseup | 用户释放鼠标按钮。 |
| onreset | 用户重置表单。 |
| onselect | 用户选取页面上的内容。 |
| onsubmit | 用户提交表单。 |
| onunload | 用户关闭页面。 |
类型
在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：
- keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
- keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
- keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。
当获取用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。
属性
利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在水保事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
/*
* 键盘事件:
* onkeydown
* -按键被按下
* -对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
* -当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
* 这种设计是为了防止误操作的发生
* onkeyup
* -按键被松开
*
* 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
*/
/*document.onkeydown=function(){
event=event||window.event;*/
/*
* 可以通过keyCode来获取按键的编码
* 通过它可以判断哪个按键被按下
* 除了keyCode,事件对象中还提供了几个属性
* altKey
* ctrlKey
* shiftKey
* -这个三个用来判断alt ctrl 和shift是否被按下
* 如果按下则返回true，否则返回false
*/
//console.log(event.keyCode);
//判断一个y是否被按下
//判断y和ctrl是否被按下
if(event.keyCode===89&&event.ctrlKey){
console.log("y和ctrl被按下了");
}
};
// document.onkeyup=function(){
// console.log("按键松开了");
// }
//获取input
var input=document.getElementsByName("input")[0];
input.onkeydown=function(event){
event=event||window.event;
//console.log(event.keyCode);
//数字48-57
//使文本框中不能输入数字
if(event.keyCode>=48&&event.keyCode<=57){
//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入内容，不会出现在文本框中
return false;
}
};
</script>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;">
</div>
</body>
</html>运行结果
键盘移动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">
//使div可以根据不同的方向键向不同的方向移动
/*
* 按左键，div向左移
* 按右键，div向右移
* ...
*/
window.onload=function(event){
event=event||window.event;
//定义一个变量，来表示移动的速度
var speed=10;
//当用户按了ctrl以后，速度加快
if(event.ctrlKey){
speed=500;
}
/*
* 37左
* 38上
* 39右
* 40下
*/
switch(event.keyCode){
case 37:
//alert("向左");left值减小
box1.style.left=box1.offsetLeft-10+"px";
break;
case 39:
alert("向右");box1.style.left=box1.offsetLeft-10+"px";
break;
case 38:
//alert("向上");
box1.style.top=box1.offsetTop-10+"px";
break;
case 40:
//alert("向下");
box1.style.left=box1.offsetLeft-10+"px";
break;
};
};
</script>
</head>
<body>
<div id="box1">
</div>
</body>
</html>Navigator
window对象属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。(请参阅对象) |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
Navigator对象属性
| 属性 | 说明 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
BOM
-浏览器对象模型
-BOM可以使我们通过JS来操作浏览器
-在BOM中为我们提供一组对象，用来完成对浏览器的操作
-BOM对象
window
-代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator
-代表的当前浏览器的信息，通过该对象可以识别不同的浏览器
Location
-代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History
-代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因、该对象不能获取到具体的历史记录，只能操作浏览器向前或向后
而且该操作只在当次访问时有效
Screen
-代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的
可以通过window对象来使用，也可以直接使用
Navigator
-代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
-由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
-一般我们只会使用userAgent来判断浏览器的信息，
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
不同的浏览器会有不同的userAgent
火狐的userAgent
Mozilla/5.0(windows NT 6.1;WOW64;rv:50) Gecko/20100101 Firefox/50.0
Chrome的userAgent
Mozilla/5.0(windows NT 6.1;WOW64;x64)AppleWebKit/537.36(KHTML,like Gecko)Chrome
-在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能确定通过UserAgent来识别一个浏览器是否是IE了
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* BOM
* -浏览器对象模型
* -BOM可以使我们通过JS来操作浏览器
* -在BOM中为我们提供一组对象，用来完成对浏览器的操作
* -BOM对象
* window
* -代表的是整个浏览器的窗口，同时window也是网页中的全局对象
* Navigator
* -代表的当前浏览器的信息，通过该对象可以识别不同的浏览器
* Location
* -代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
* History
* -代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
* 由于隐私原因、该对象不能获取到具体的历史记录，只能操作浏览器向前或向后
* 而且该操作只在当次访问时有效
* Screen
* -代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息
*
* 这些BOM对象在浏览器中都是作为window对象的属性保存的
* 可以通过window对象来使用，也可以直接使用
*/
//console.log(location);
//console.log(navigator);
/*
* Navigator
* -代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
* -由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
* -一般我们只会使用userAgent来判断浏览器的信息，
* userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
* 不同的浏览器会有不同的userAgent
*
* 火狐的userAgent
* Mozilla/5.0(windows NT 6.1;WOW64;rv:50) Gecko/20100101 Firefox/50.0
* Chrome的userAgent
* Mozilla/5.0(windows NT 6.1;WOW64;x64)AppleWebKit/537.36(KHTML,like Gecko)Chrome
*
* -在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能确定通过UserAgent来识别一个浏览器是否是IE了
*/
//alert(navigator.appName);
var ua=navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
alert("你是火狐");
}else if(/chrome/i.test(ua)){
alert("你是Chrome");
}else if(/msie/i.test(ua)){
alert("你是IE浏览器~~~");
}
/*
* 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
* 比如：ActiveXObject
*
* if(window.ActiveXObject){
* alert("你是IE，我已经抓住你了");
* }else{
* alert("你不是IE~~");
* }
*/
/*alert(window.ActiveXObject);*/
</script>
</head>
<body>
</body>
</html>运行结果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
