浏览器事件
2016-08-30 10:40
183 查看
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。
浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。
先考察如下的代码:
将上述源程序保存为*.html(或*.htm)文档,双击该文档后系统调用默认的浏览器进行浏览。
当载入该文档时,触发 window.load 事件,弹出警告框如图3.2 所示。
图 3.2 载入文档时触发window.load 事件
当把焦点给该文档页面时,触发 window.onfocus 事件,弹出警告框如图3.3 所示。
图 3.3 文档取得焦点时触发window.onfocus 事件
当该页面失去焦点时,触发 window.blur 事件,弹出警告框如图3.4 所示。
图3.4 文档失去焦点时触发window.onblur 事件
当用户拖动滚动条时,触发 window.onscroll 事件,弹出警告框如图3.5 所示。
图 3.5 拖动滚动条,触发window.onscroll 事件
当用户改变文档页面大小时,触发 window.onresize 事件,弹出警告框如图3.6 所示。
图 3.6 改变文档页面大小,触发window.onresize 事件
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合,在页面的交互性、动态性方面使用较为广泛。
注意:Netscape Navigator 4 支持window.onmove 事件,该事件在当前浏览器窗口被用户移动时触发,主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。
浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。
先考察如下的代码:
//源程序3.1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Sample Page!</title> <script type="text/javascript"> <!-- window.onload = function () { var msg="\nwindow.load 事件 : \n\n"; msg+=" 浏览器载入了文档!"; alert(msg); } window.onfocus = function () { var msg="\nwindow.onfocus 事件 : \n\n"; msg+=" 浏览器取得了焦点!"; alert(msg); } window.onblur = function () { var msg="\nwindow.onblur 事件 : \n\n"; msg+=" 浏览器失去了焦点!"; alert(msg); } window.onscroll = function () { var msg="\nwindow.onscroll 事件 : \n\n"; msg+=" 用户拖动了滚动条!"; alert(msg); } window.onresize = function () { var msg="\nwindow.onresize 事件 : \n\n"; msg+=" 用户改变了窗口尺寸!"; alert(msg); } //--> </script> body> <br> <p>载入文档:</p> <p>取得焦点:</p> <p>失去焦点:</p> <p>拖动滚动条:</p> <p>变换尺寸:</p> </body> </html> |
当载入该文档时,触发 window.load 事件,弹出警告框如图3.2 所示。
图 3.2 载入文档时触发window.load 事件
当把焦点给该文档页面时,触发 window.onfocus 事件,弹出警告框如图3.3 所示。
图 3.3 文档取得焦点时触发window.onfocus 事件
当该页面失去焦点时,触发 window.blur 事件,弹出警告框如图3.4 所示。
图3.4 文档失去焦点时触发window.onblur 事件
当用户拖动滚动条时,触发 window.onscroll 事件,弹出警告框如图3.5 所示。
图 3.5 拖动滚动条,触发window.onscroll 事件
当用户改变文档页面大小时,触发 window.onresize 事件,弹出警告框如图3.6 所示。
图 3.6 改变文档页面大小,触发window.onresize 事件
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合,在页面的交互性、动态性方面使用较为广泛。
注意:Netscape Navigator 4 支持window.onmove 事件,该事件在当前浏览器窗口被用户移动时触发,主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。
相关文章推荐
- 处理各种浏览器 获取事件目标的兼容性
- JS之 为之崩溃的事件模型(不同浏览器)
- 捕获浏览器关闭、刷新事件不同情况下的处理方法
- 关闭浏览器触发事件
- 浏览器窗口关闭事件的监听搜集
- 跨浏览器的事件处理程序和跨浏览器的事件对象
- js的window.onscroll事件兼容各大浏览器!
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- 浏览器窗口加载和大小改变事件
- 兼容各个浏览器实现键盘响应事件
- 原生JS实现跨浏览器的事件处理程序
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 移动端微信内置浏览器(或QQ浏览器)无法识别onclick事件的解决
- IE事件处理程序与其他浏览器之区别
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
- JS监听关闭浏览器事件
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 监控页面后退前进,浏览器文档加载事件之pageshow、pagehide
- 监听浏览器回退事件
- 一段关于浏览器兼容的事件定位代码,经过测试!