前端JS-20

目录 滚轮的事件 完整代码 键盘事件 事件句柄 类型 属性 完整代码 运行结果 键盘移动div Navigator window对象属性

目录

滚轮的事件

完整代码

键盘事件

事件句柄

类型

属性

 完整代码

运行结果

键盘移动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








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返回最顶层的父窗口。
属性说明
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了

完整代码








运行结果