目录
滚轮的事件
完整代码
键盘事件
事件句柄
类型
属性
完整代码
运行结果
键盘移动div
window对象属性
BOM
完整代码
运行结果
滚轮的事件
完整代码
键盘事件
事件句柄
| 事件 | 当...时发生 |
|---|---|
| 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 键时单击鼠标操作。

完整代码
运行结果

键盘移动div
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了
完整代码
运行结果
