JavaScript--Location对象、History对象及事件

最新推荐文章于 2025-09-22 20:02:39 发布

原创最新推荐文章于 2025-09-22 20:02:39 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

本文详细介绍了JavaScript中的History对象和Location对象，包括它们的主要方法和属性，如back()、forward()、go()、host、hostname、href等。此外，还讲解了事件的注册方式和Window对象、Document对象上的常见事件，如onload、onscroll、onerror等，并探讨了表单元素中的文本框属性和事件处理。

一、History对象

History对象:有关客户访问过的URL的信息。

back() 加载 History列表中的上一个URL

forward() 加载 History 列表中的下一个 URL

go("url" or number) 加载 History列表中的一个 URL或要求浏览器移动指定的页面数

back ()方法相当于后退按钮;

forward ()方法相当于前进按钮;

go(1)代表前进1页，等价于forward()方法;

go(-再代表后退1页，等价于back()方法;

方法代码展示：

第一个html文件主要设置一个按钮，点击事件，使用herf属性

<input type="button" name="" id="btn" value="打开demo2.html" />
		<script type="text/javascript">
			document.getElementById("btn").onclick = function(){
				location.href = "demo2.html";
			}
		</script>

第二个html文件，主要有四个按钮，第一个是返回上一页面的按钮，第二个是跳转到下一页面的按钮，第三个是有历史浏览记录才能加载到下一页面，第四个等同于back() forward()的作用

	<input type="button" name="" id="btn1" value="back()" />
		<input type="button" name="" id="btn2" value="打开demo3.html" />
		<input type="button" name="" id="btn3" value="forward()" />
		<input type="button" name="" id="btn4" value="go" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick = function(){
				history.back();
			}
			document.getElementById("btn2").onclick = function(){
				location.href = "demo3.html";
			}
			document.getElementById("btn3").onclick = function(){
				history.forward();
			}
			document.getElementById("btn4").onclick = function(){
				// history.go(1); //相当于forward()的功能
				history.go(-1);  //相当于back()的功能
				
			}
		</script>

第三个html文件，第一个按钮设置一个网址跳转过去，第两个按钮主要是都是实现返回上一页面得一个作用

	<input type="button" name="" id="btn1" value="博客主页" />
		<input type="button" name="" id="btn2" value="go" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick = function(){
				location.href = "https://blog.youkuaiyun.com/weixin_67224308";
			}
			document.getElementById("btn2").onclick = function(){
				history.go(-2);
			}
		</script>

二、Location对象

Location对象:有关当前URL的信息。

host 设置或检索位置或 URL 的主机名和端口号

hostname 设置或检索位置或URL的主机名部分

href 设置或检索完整的URL字符串

assign("url") 加载 URL指定的新的HTML文档。

reload() 重新加载当前页

replace("url") 通过加载 URL指定的文档来替换当前文档

	    <input type="button" name="" id="btn1" value="assign()" />
		<input type="button" name="" id="btn2" value="reload()" />
		<input type="button" name="" id="btn3" value="replace()" />
		<script type="text/javascript">
			console.log(location.host);
			console.log(location.hostname);
			console.log(location.href);
			document.getElementById("btn1").onclick = function(){
				location.assign("https://blog.youkuaiyun.com/weixin_67224308");//有后退功能，可以返回
			}
			document.getElementById("btn2").onclick = function(){
				location.reload();
			}
			document.getElementById("btn3").onclick = function(){
				location.replace("https://blog.youkuaiyun.com/weixin_67224308");//替换当前页面，无法后退
			}
		</script>

三、属性、方法和事件

属性

√属性是指对象包含的值,使用’对象名.属性名的方式进行操作,如

document.myfrom.first.value

方法

√在代码里，使用’对象名.方法名()’来调用该对象的方法。

√alter(" )=Windows.alter( " )

事件

√响应用户操作、完成交互,如OnClick、OnKeyDown

√一般可以分为鼠标事件、键盘事件及其他事件

四、事件注册方式

将事件绑定到元素属性

<input type="button" name="" id="btn1" value="按钮1" onclick="arr()" />
function test(){
				alert("蛋蛋");
			}

将事件绑定到对象属性

<input type="button" name="" id="btn2" value="按钮1"  />
document.getElementById("btn2").onclick = function(){
				alert("宝宝");
			}

五、Window对象常用事件

onload() 对象装载完成后触发

onscroll() 窗口的滚动条被拖动时触发

onresize() 窗口的大小改变时触发

onblur()/onfocus(）窗口失去/获得焦点时触发

onerror() 遇到执行错误时触发

onunload() 对象被卸载后触发

五、Document对象

onload() 对象装载完成后触发

onkeydown 按下一个键

onkeyup 松开一个键

onkeypress 按下然后松开一个键

onunload() 对象被卸载后触发

onmousedown 按下鼠标键

onmousemove 移动鼠标

onmouseout 鼠标离开当前页面

onmouseover 鼠标移动到当前页

onmouseup 松开鼠标键

onclick 单击鼠标键

ondblclick 双击鼠标键

六、表单元素-表单

属性

action 表单数据将被提交的页面

method 提交表单的方法，get/post

方法

submit() 提交表单

事件

onsubmit 提交表单时触发，返回false时取消提交

<form action= "PostURL.htm" method="post">
<input id="Reset" type="reset" value="重置"/>
<input id="Submit" type="submit" value="提交/>
</form>

post的数据不会在URL中显示，而get则会显示;所以建议使用post，安全!

七、表单元素-文本框

属性

value 文本框的内容

readonly 只读，只允许后台修改

方法

focus() 使文本框获得焦点

select() 选中文本框内容

事件

onblur 文本框失去焦点时触发

onfocus 文本框获得焦点时触发

onchange 文本框内容改变且失去焦点时触发