前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天-CFANZ编程社区

一.js事件和对象

1.1JavaScript的事件

1.1.1 onclick事件

鼠标单击产生onclick事件,同时onclick指定的事件处理程序或代码将被调用执行

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div align="center">
        <img src="images/yx2.jpeg" width="778" height="407">
        <input type="button" name="fullscreen" value="全屏" onclick="window.open(document.location,'big','fullscreen=yes')">
        <input type="button" name="close" value="还原" onclick="window.close()">
    </div>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_javascript

eg2:计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">
        function Add() {
            var a1=document.getElementById("add1");
            var a2=document.getElementById("add2");
            var a3=document.getElementById("ans");
            var n=parseInt(a1.value)+parseInt(a2.value);
            a3.value=n;
        }
    </script>
    <style type="text/css">
        .text{
            height: 30px;
            font-size: 30px;
            background-color: crimson;
        }
    </style>
</head>
<body>
    <div align="center">
        <input type="number" value="0" id="add1" class="text">
        +
        <input type="number" value="0" id="add2" class="text">
        <input type="button" value="=" onclick="Add()" class="text">
        <input type="number" value="0" id="ans" class="text">
    </div>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_02

1.1.2 onchange事件

与表单相关的事件,当利用text或textarea元素输入的字符值改变时发生改事件,同时当在select表格中的一个选项状态改变后也会引发该事件

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange</title>
</head>
<body>招商加盟:
    <form id="form1" name="form1" method="post" action="">
        <p>您的姓名:
        <input type="text" name="textfield"/>
        </p>
        <p><br>
            留言内容:<br>
            <textarea name="textarea" cols="50" rows="5" onchange=alert("输入留言内容")></textarea>
        </p>
    </form>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_数据_03

1.1.3 onselect事件

当文本框内容被选中时所发生的事件

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onselect</title>
    <script language="JavaScript">
        function print() {
            alert("你选中了文本框内的文本!");
        }
    </script>
    <style type="text/css">
        input{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <input type="text" onselect="print()" value="选中我!">
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_javaweb基础_04

1.1.4 onfocus事件

当单击表单对象时,即将光标放在文本框或选择框上时产生onfocus事件

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onfocus</title>
    <script language="JavaScript">
        function changeColor(x) {
            x.style.backgroundColor="yellow";
        }
    </script>
    <style type="text/css">
        input{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <input type="text" onfocus="changeColor(this)" value="我获得焦点就会变色">
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_javaweb基础_05

1.1.5 onload事件

首次载入一个页面文件时检测cookie的值,并用一个变量为其赋值,使其可以被源代码使用

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <script language="JavaScript">
        function load(x) {
            document.body.style.backgroundColor="#ff9";
            // x.style.backgroundColor="#ff9";//不行
            alert("页面加载完成!");
        }
    </script>
</head>
<body onload="load(this)" >
<font size="30px" face="华文行楷">世界,你好!</font>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_06

13.3.6 onunload事件

退出网页时引发onunload事件,并可更新cookie的状态

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onunload</title>
    <script language="JavaScript">
        function close() {
            alert("拜拜!");
        }
    </script>
</head>
<body onunload="close()">
    <p1>退出页面或按F5刷新试试!</p1>
</body>
</html>

运行结果:无预期结果

1.1.7 onBlur事件

失去焦点事件正好与获得焦点事件相对

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur</title>
    <script language="JavaScript">
        function focu() {
            var a=document.getElementById("text");
            a.value="我获得焦点了!"
        }
        function blu() {
            var a=document.getElementById("text");
            a.value="我失去了焦点!"
        }
    </script>
    <style type="text/css">
        input{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <input type="text" id="text" value="" onfocus="focu()" onblur="blu()">
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_07

1.1.8 onMouseOver事件与 onMouseOut事件

onMouseOver鼠标指针移动到某对象范围的上方时触发的事件

onMouseOver则是鼠标指针离开对象时触发的事件

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onMouseOver和onMouseOut</title>
    <script language="JavaScript">
        function over(x) {
            var n=parseInt(x.height)+50;
            var m=parseInt(x.width)+100;
            x.style.height=n+"px";
            x.style.width=m+"px";
            // x.style.height="700px";
            // x.style.width=m+"500px";
        }
        function out(x) {
            var n=parseInt(x.height)-50;
            var m=parseInt(x.width)-100;
            x.style.height=n+"px";
            x.style.width=m+"px";
            // x.style.height="640px";
            // x.style.width="401px";
        }
    </script>
</head>
<body>
    <img src="images/yx.jpeg" onmouseover="over(this)" onmouseout="out(this)" width="590" height="301"><br>
    <h1>鼠标放到图片上去图片变大</h1>
    <h1>鼠标离开图片图片变小</h1>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_08

13.3.10 onDblClick事件

鼠标双击触发

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ondblclick</title>
    <script language="JavaScript">
        function  copy() {
            var a=document.getElementById("t1");
            var b=document.getElementById("t2");
            b.value=a.value;
        }
    </script>
    <style>
        input{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <input type="text" value="Hello world!" id="t1"><br>
    <input type="text" value="" id="t2"><br>
    <input type="button" value="双击复制" ondblclick="copy()">
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_javaweb基础_09

1.1.11其他常用事件

事件大全1

事件大全2

事件	浏览器支持	解说
一般事件	onclick	IE3、N2	鼠标点击时触发此事件
ondblclick	IE4、N4	鼠标双击时触发此事件
onmousedown	IE4、N4	按下鼠标时触发此事件
onmouseup	IE4、N4	鼠标按下后松开鼠标时触发此事件
onmouseover	IE3、N2	当鼠标移动到某对象范围的上方时触发此事件
onmousemove	IE4、N4	鼠标移动时触发此事件
onmouseout	IE4、N3	当鼠标离开某对象范围时触发此事件
onkeypress	IE4、N4	当键盘上的某个键被按下并且释放时触发此事件.
onkeydown	IE4、N4	当键盘上某个按键被按下时触发此事件
onkeyup	IE4、N4	当键盘上某个按键被按放开时触发此事件
页面相关事件	onabort	IE4、N3	图片在下载时被用户中断
onbeforeunload	IE4、N	当前页面的内容将要被改变时触发此事件
onerror	IE4、N3	出现错误时触发此事件
onload	IE3、N2	页面内容完成时触发此事件
onmove	IE、N4	浏览器的窗口被移动时触发此事件
onresize	IE4、N4	当浏览器的窗口大小被改变时触发此事件
onscroll	IE4、N	浏览器的滚动条位置发生变化时触发此事件
onstop	IE5、N	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload	IE3、N2	当前页面将被改变时触发此事件
表单相关事件	onblur	IE3、N2	当前元素失去焦点时触发此事件
onchange	IE3、N2	当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus	IE3 、N2	当某个元素获得焦点时触发此事件
onreset	IE4 、N3	当表单中RESET的属性被激发时触发此事件
onsubmit	IE3 、N2	一个表单被递交时触发此事件
滚动字幕事件	onbounce	IE4、N	在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish	IE4、N	当Marquee元素完成需要显示的内容后触发此事件
onstart	IE4、 N	当Marquee元素开始显示内容时触发此事件
编辑事件	onbeforecopy	IE5、N	当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut	IE5、 N	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus	IE5、N	当前元素将要进入编辑状态
onbeforepaste	IE5、 N	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate	IE5、 N	当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu	IE5、N	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy	IE5、N	当页面当前的被选择内容被复制后触发此事件
oncut	IE5、N	当页面当前的被选择内容被剪切时触发此事件
ondrag	IE5、N	当某个对象被拖动时触发此事件 [活动事件]
ondragdrop	IE、N4	一个外部对象被鼠标拖进当前窗口或者帧
ondragend	IE5、N	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter	IE5、N	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave	IE5、N	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover	IE5、N	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart	IE4、N	当某对象将被拖动时触发此事件
ondrop	IE5、N	在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture	IE5、N	当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste	IE5、N	当内容被粘贴时触发此事件
onselect	IE4、N	当文本内容被选择时的事件
onselectstart	IE4、N	当文本内容选择将开始发生时触发的事件
数据绑定	onafterupdate	IE4、N	当数据完成由数据源到对象的传送时触发此事件
oncellchange	IE5、N	当数据来源发生变化时
ondataavailable	IE4、N	当数据接收完成时触发事件
ondatasetchanged	IE4、N	数据在数据源发生变化时触发的事件
ondatasetcomplete	IE4、N	当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate	IE4、N	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter	IE5、N	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit	IE5、N	当前数据源的数据将要发生变化时触发的事件
onrowsdelete	IE5、N	当前数据记录将被删除时触发此事件
onrowsinserted	IE5、N	当前数据源将要插入新数据记录时触发此事件
外部事件	onafterprint	IE5、N	当文档被打印后触发此事件
onbeforeprint	IE5、N	当文档即将打印时触发此事件
onfilterchange	IE4、N	当某个对象的滤镜效果发生变化时触发的事件
onhelp	IE4、N	当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange	IE5、N	当对象的属性之一发生变化时触发此事件
onreadystatechange	IE4、N	当对象的初始化属性值发生变化时触发此事件

1.2 浏览器的内部对象

浏览器对象(navigator):提供有关浏览器的信息

文档对象(document):document对象包含了与文档元素一起工作的对象

窗口对象(windows):windows对象处于对象层次最顶端,它提供了处理浏览器窗口的方法和属性

位置对象(location):location对象提供了与当前打开的URL一起工作的方法的属性,他是一个静态对象.

历史对象(history):history对象提供了与历史清单有关的信息

js提供了非常丰富的内部方法和属性.document对象最为重要

1.2.1 navigator对象

navigator对象可用来存取浏览器的相关信息,其常用属性如表:

Navigator 对象集合

集合	描述
plugins[]	返回对文档中所有嵌入式对象的引用。该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。虽然 plugins[] 数组是由 IE 4 定义的，但是在 IE 4 中它却总是空的，因为 IE 4 不支持插件和 Plugin 对象。

Navigator 对象属性

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

Navigator 对象方法

方法	描述
javaEnabled()	规定浏览器是否启用 Java。
taintEnabled()	规定浏览器是否启用数据污点 (data tainting)。

Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navigator对象</title>
</head>
<body onload="check()">
    <script language="JavaScript">
        function check() {
            document.writeln("浏览器的代码名:"+navigator.appCodeName+"<br>");
            document.writeln("浏览器的平台和版本信息:"+navigator.appVersion+"<br>");
            document.writeln("浏览器的名称:"+navigator.appName+"<br>");
            document.writeln("由客户机发送服务器的 user-agent 头部的值:"+navigator.userAgent+"<br>");
        }
    </script>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_10

1.2.2 document对象

js的输出可通过document对象实现.在document对象中主要有links,anchor和form 3个重要的对象

Document 对象集合

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">
        function Links() {
            var n=document.links.length;
            var s="";
            for(var j=0;j<n;j++){
                s=s+document.links[j].href+"\n\n";
                if(s==""){
                    s=="没有任何链接";
                }else{
                    alert(s);
                }
            }
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="所有链接地址" onclick="Links()"><br>
    </form>
    <p><a href="#">文档1</a></p>
    <p><a href="#">文档2</a></p>
    <p><a href="#">文档3</a></p>
    <p><a href="#">文档4</a></p>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_11

1.2.3 windows对象

windows对象处于对象层次最顶端,提供了处理navigator窗口的方法和属性.js的输入可以通过windows对象来实现

Window 对象集合

集合	描述
frames[]	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

eg:时钟

<html>
<head>
    <meta charset="UTF-8">
    <title>setInterval</title>
    <style type="text/css">
        input{
            font-size: 30px;
        }
        button{
            font-size: 30px;
        }
    </style>
</head>

<body>
    <input type="text" id="clock" size="35" />

    <script language=javascript>
        var int=self.setInterval("clock()",50);
        function clock()
        {
            var t=new Date();
            document.getElementById("clock").value=t;
        }
    </script>

    <button onclick="int=window.clearInterval(int)">Stop interval</button>

</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_数据_12

windows对象应用2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>windows对象的应用</title>
    <script language="JavaScript">
        //判断字符s是否为空
        function checkValid(s) {
            var len=s.length;
            for(var i=0;i<len;i++){
                if(s.charAt(i)!=""){
                    return false;
                }
            }
            return true;
        }
        //录入信息检查通过后新建窗体
        function submitWindow() {
            var w=window.open("","","height=200,width=300,menubar=yes,toolbar=yes");
            w.document.writeln("您填写的信息已经通过检验!");
        }
        //关闭窗体
        function closeWindow() {
            var flag=window.confirm("您确定要关闭当前页面吗?");
            if(flag==true){
                window.close();
            }
        }
        //确定按钮
        function okHandle() {
            if(checkValid(document.test.userName.value)){
                window.alert("用户名不能为空!");
            }else if(checkValid(document.test.passWord.value)){
                window.alert("用户密码不能为空!");
            }else{
                submitWindow();
            }
        }
        //取消按钮的事件处理函数
        function cancelHandle() {
            document.test.userName.value="";
            document.test.passWord.value="";
        }
    </script>
</head>
<body>
    <form name="test">
        <a href="http://www.sina.com" onmouseover="window.status='单击字符串可以访问新浪网首页!';return true">
            <h3>Example:windows对象应用</h3>
        </a>
        <font size="2">用户名称:</font>
        <input type="text" name="userName">
        <br><br>
        <font size="2">用户密码:</font>
        <input type="password" name="passWord">
        <br><br>
        <input type="button" name="ok" value="确定" onclick="okHandle()">
        <input type="button" name="cancel" value="取消" onclick="cancelHandle()">
        <input type="button" name="close" value="关闭窗体" onclick="closeWindow()">

    </form>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_html_13

说明1:状态栏不显示

说明2:open方法

window.open(URL,name,features,replace)

参数	描述
URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征(如width,height)这个表格中，我们对该字符串的格式进行了详细的说明。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

控制窗口外观的参数（Window Features）

channelmode=yes\|no\|1\|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes\|no\|1\|0	是否添加目录按钮。默认为 yes。
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes\|no\|1\|0	是否显示地址字段。默认是 yes。
menubar=yes\|no\|1\|0	是否显示菜单栏。默认是 yes。
resizable=yes\|no\|1\|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes\|no\|1\|0	是否显示滚动条。默认是 yes。
status=yes\|no\|1\|0	是否添加状态栏。默认是 yes。
titlebar=yes\|no\|1\|0	是否显示标题栏。默认是 yes。
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

1.2.4 location对象

一个静态对象,它描述的是某一个窗口对象所打开的地址.

Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
    <script language="JavaScript">
        function showURL() {
            alert(location.href);
            alert(window.location)
        }
        function changeURL() {
            location.href="http://www.baidu.com";
        }
    </script>
</head>
<body>
    <button name onclick="showURL()">显示当前URL</button>
    <button onclick="changeURL()">改变当前URL</button>
</body>
</html>

运行结果:

前端基础 JavaScript 第五章事件和事件处理(事件强化举例)----假期学习第十四天_前端js_14

1.2.5 history对象

浏览器的浏览历史

History 对象属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

History 对象方法

方法	描述
back()	加载 history 列表中的前一个 URL。(等价于后退)
forward()	加载 history 列表中的下一个 URL。(等价于前进)
go()	加载 history 列表中的某个具体页面。

eg:前进后退

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
    <p><a href="13location对象.html">history对象</a></p>
    <form name="form1" method="post" action="">
        <input type="button" name="按钮" onclick="history.back()" value="返回">
        <input type="button" name="按钮" onclick="history.forward()" value="前进">
    </form>
</body>
</html>