window对象的学习(四)

最新推荐文章于 2024-10-06 12:35:17 发布

原创最新推荐文章于 2024-10-06 12:35:17 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #input #百度 #button #border #function

javascript/CSS/HTML5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了网页中的各类事件，如onload、onunload等，并详细解释了location对象的方法，包括replace、reload及assign。通过实例展示了如何使用这些方法实现页面自动跳转与留言发布后的页面自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window对象的专用事件:

onload事件：加载网页时候的响应的事件;

onunload事件：卸载页面的时候响应的事件;

onbeforeunload事件:关闭页面的时候响应的事件;

Example code:

<body onload="alert('欢迎');" onunload="alert('再见');" onbeforeunload="alert(请小心!);"> <h2>演示window事件文档</h2> </body>

通用事件：

onclick事件:点击鼠标响应事件

onmousemove事件：鼠标掠过事件

onmouseout事件：鼠标移出区域事件

onkeydown事件：按键按下事件

onkeyup事件：按键抬起事件

onkeypress事件：按下按钮事件。

window对象的对象属性：

locaton对象:

方法：locaton.replace(sURL) :替换当前页面为新的sURL地址字符串所指向的页面。

方法：location.reload() :重新加载当前页面

方法：location.assign(sURL) :加载一个新的sURL地址所指向的页面

Example code：实现效果为打开页面后三秒钟自动转到百度主页

<HTML> <HEAD> <TITLE>响应</TITLE> <SCRIPT LANGUAGE="JavaScript"> setTimeout('location.replace("http://www.baidu.com")',3000); </SCRIPT> </HEAD> <BODY> <h2>3秒后自动转到百度！</h2> </BODY> </HTML>

实际应用:

在论坛系统中，在用户留言后，自动刷新留言展示也页面，可以利用所学的实现。在留言浏览页面，用户在留言表单中填写信息之后，点击发表按钮触发onclick事件,响应该事件的处理函数代码要让自身页面重新载入，于是就可以用学到的location.reload()方法.

Example code:

<HTML> <HEAD> <TITLE>响应</TITLE> <SCRIPT LANGUAGE="JavaScript"> function refresh() { window.location.reload("act.html"); } </SCRIPT> </HEAD> <BODY> <h2>留言板</h2>  <form type="input" name="form"> <table width="400" border="1"> <tr><td>输入姓名:</td><td><input type="text" name="name" /></td></tr> <tr><td>输入留言:</td><td><textarea name="msg" col="80" rows="8"> <tr><td colspan="2" align="center"><input type="button" value="发表" onclick="refresh"/></td></tr> </form> </BODY> </HTML>