JavaScript（17）：BOM，Window 对象

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

一、Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

1、Window 对象属性

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

注意：

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

2、Window 对象方法

open() 打开一个窗口。用法：open(<URL字符串>, <窗口名称字符串>, <参数字符串>);
close() 关闭一个已打开的窗口。
blur() 使焦点从窗口移走，窗口变为“非活动窗口”。
focus() 是窗口获得焦点，变为“活动窗口”。不过在 Windows 98，该方法只能使窗口的标题栏和任务栏上的相应按钮闪烁，提示用户该窗口正在试图获得焦点。
scrollTo() 用法：[<窗口对象>.]scrollTo(x, y)；使窗口滚动，使文档从左上角数起的(x, y)点滚动到窗口的左上角。
scrollBy() 用法：[<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。
resizeTo() 用法：[<窗口对象>.]resizeTo(width, height)；使窗口调整大小到宽 width 像素，高 height 像素。
resizeBy() 用法：[<窗口对象>.]resizeBy(deltaWidth, deltaHeight)；使窗口调整大小，宽增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取负值，则减少。
alert() 用法：alert(<字符串>)；弹出一个只包含“确定”按钮的对话框，显示<字符串>的内容，整个文档的读取、Script 的运行都会暂停，直到用户按下“确定”。
confirm() 用法：confirm(<字符串>)；弹出一个包含“确定”和“取消”按钮的对话框，显示<字符串>的内容，要求用户做出选择，整个文档的读取、Script 的运行都会暂停。如果用户按下“确定”，则返回 true 值，如果按下“取消”，则返回 false 值。
prompt() 用法：prompt(<字符串>[, <初始值>])；弹出一个包含“确认”“取消”和一个文本框的对话框，显示<字符串>的内容，要求用户在文本框输入一些数据，整个文档的读取、Script 的运行都会暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定<初始值>，则文本框里会有默认值。

3、Window 对象事件

onload; onunload; onresize; onblur; onfocus; onerror

4、frame框架

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

要引用窗口中的一个框架，可以使用如下语法：

frame[i]        //当前窗口的框架
self.frame[i]    //当前窗口的框架
w.frame[i]    //窗口 w 的框架

要引用一个框架的父窗口（或父框架），可以使用下面的语法：

parent        //当前窗口的父窗口
self.parent    //当前窗口的父窗口
w.parent         //窗口 w 的父窗口

要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：

top        //当前框架的顶层窗口
self.top        //当前框架的顶层窗口
f.top        //框架 f 的顶层窗口

新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。

5、Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该例显示浏览器窗口的高度和宽度。

二、Screen，屏幕信息

window.screen 对象包含有关用户屏幕的信息。

window.screen对象在编写时可以不使用 window 这个前缀。

属性

width 返回屏幕的宽度（像素数）。
height 返回屏幕的高度。
availWidth 返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。
availHeight 返回屏幕的可用高度。
colorDepth 返回当前颜色设置所用的位数 - 1：黑白；8：256色；16：增强色；24/32：真彩色

Screen 可用宽度、可用高度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

返回您的屏幕的可用宽度：

document.write("可用宽度: " + screen.availWidth);

document.write("可用高度: " + screen.availHeight);

以上代码输出为：

可用宽度: 1920

三、Location，页面地址信息

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

1、属性

protocol ：返回地址的协议，取值为 'http:','https:','file:' 等等。
hostname ：返回地址的主机名，例如，一个“http://www.microsoft.com/china/”的地址，location.hostname == 'www.microsoft.com'。
port ：返回地址的端口号，一般 http 的端口号是 '80'。
host ：返回主机名和端口号，如：'www.a.com:8080'。
pathname ：当前页面的路径和文件名，如“http://www.a.com/b/c.html”，location.pathname == 'b/c.html'。
hash ：返回“#”以及以后的内容，如“http://www.a.com/b/c.html#chapter4”，location.hash == '#chapter4'；如果地址里没有“#”，则返回空字符串。
search ：返回“?”以及以后的内容，如“http://www.a.com/b/c.asp?selection=3& jumpto=4”，location.search == '?selection=3&jumpto=4'；如果地址里没有“?”，则返回空字符串。
href ：返回以上全部内容，也就是说，返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址，可以使用 “location.href = '...'”，也可以直接用“location = '...'”来达到此目的。

document.write(location.href); // https://www.runoob.com/js/js-window-location.html
document.write(location.pathname); // /js/js-window-location.html

2、方法

reload() ：相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() ：打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。

location.assign() 方法加载新的文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function newDoc(){
    window.location.assign("https://www.runoob.com")
}
</script>
</head>
<body>
 
<input type="button" value="加载新文档" onclick="newDoc()">
 
</body>
</html>

3、获取查询参数

function getQueryString(name) {
    // 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空
    if (location.href.indexOf("#") == -1 || location.href.indexOf(name + '=') == -1) {
        return '';
    }
    // 获取链接中参数部分
    var queryString = location.href.substring(location.href.indexOf("#") + 1);
    // 分离参数对 ?key=value&key2=value2
    var parameters = queryString.split("&");
    var pos, paraName, paraValue;
    for (var i = 0; i < parameters.length; i++) {
        // 获取等号位置
        pos = parameters[i].indexOf('=');
        if (pos == -1) { continue; }
        // 获取name 和 value
        paraName = parameters[i].substring(0, pos);
        paraValue = parameters[i].substring(pos + 1);
        // 如果查询的name等于当前name，就返回当前值，同时，将链接中的+号还原成空格
        if (paraName == name) {
            return unescape(paraValue.replace(/\+/g, " "));
        }
    }
    return '';
}

四、History，浏览器的历史信息

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

1、属性

length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。

2、方法

back() 后退，跟按下“后退”键是等效的。
forward() 前进，跟按下“前进”键是等效的。
go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

3、history.back()、forward()

history.back() 方法加载历史列表中的前一个 URL。这与在浏览器中点击后退按钮是相同的：

history forward() 方法加载历史列表中的下一个 URL。这与在浏览器中点击前进按钮是相同的：

在页面上创建后退按钮：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
function goBack()
{
    window.history.back()
}
</script>
</head>
<body>
 
<input type="button" value="Back" onclick="goBack()">
 
</body>
</html>

五、Navigator，浏览器的信息

window.navigator 对象包含有关访问者浏览器的信息。

1、属性

appCodeName 返回浏览器的“码名”(?)，流行的 IE 和 NN 都返回 'Mozilla'。
appName 返回浏览器名。IE 返回 'Microsoft Internet Explorer'，NN 返回 'Netscape'。
appVersion 返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。
platform 返回浏览器的操作平台，对于 Windows 9x 上的浏览器，返回 'Win32'（大小写可能有差异）。
userAgent 返回以上全部信息。例如，IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。
javaEnabled() 返回一个布尔值，代表当前浏览器允许不允许 Java。

window.navigator 对象在编写时可不使用 window 这个前缀。

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

注意：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

2、浏览器检测

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

例子：if (window.opera) {...some action...}

六、JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

1、警告框，alert()方法

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

window.alert("sometext");

2、确认框,confirm()方法

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

window.confirm() 方法可以不带上window对象，直接使用。

var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}

3、提示框,prompt()方法

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 " + person + "! 今天感觉如何?";
    document.getElementById("demo").innerHTML=x;
}

4、换行

弹窗使用反斜杠 + "n"(\n) 来设置换行。

alert("Hello\nHow are you?");

七、JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

1、setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

如：每三秒弹出 "hello" ：

setInterval(function(){alert("Hello")},3000);

实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是手表一样。

实例：显示当前时间

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval("javascript function",milliseconds);

然后你可以使用 clearInterval() 方法来停止执行。

以下例子,我们添加了 "停止" 按钮：

var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}

尝试一下 »

2、setTimeout() 方法

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

如：等待3秒，然后弹出 "Hello":

setTimeout(function(){alert("Hello")},3000);

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

var myVar;
 
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
    clearTimeout(myVar);
}

尝试一下 »

八、Window open() 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

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

参数说明：

URL：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

name：可选。指定target属性或窗口的名称。支持以下值：

_blank：URL加载到一个新的窗口。这是默认
_parent ：URL加载到父框架
_self ： URL替换当前页面
_top ： URL替换任何可加载的框架集
name：窗口名称

specs：可选。一个逗号分隔的项目列表。支持以下值：

left=pixels:该窗口的左侧位置
top=pixels:窗口顶部的位置.仅限IE浏览器
height=pixels:窗口的高度。最小.值为100
width=pixels:窗口的宽度.最小.值为100
channelmode=yes|no|1|0:是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0:是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0:浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
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：是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0:是否显示浏览器工具栏.默认值是yes

replace：Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

在新浏览器窗口中打开 www.runoob.com ：

function open_win() {
    window.open("http://www.runoob.com");
}

下面的示例在一个新的浏览器打开一个window空白页：

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();
}

九、window.showModalDialog()：模态对话框

创建一个显示指定 HTML 文档的模式对话框。

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

sURL:可选参数，要打开新窗口的地址url.
vArguments:可选参数,可用来向子窗口传递参数.用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。这个参数隐藏掉，不用放在url里，提高了安全性。
sFeatures：可选参数，dialogHeight,dialogWidth,dailogLeft,dialogTop,center,dialogHide,edge,help,resizable,scroll,status,unadorned.

参数传递：

1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

parent.htm

var obj = new Object(); 
obj.name="51js"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

modal.htm

var obj = window.dialogArguments 
 alert("您传递的参数为：" + obj.name)

2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

parent.htm

str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
 alert(str);

modal.htm

window.returnValue="http://www.web3.cn";

十、Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

1、事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

onabort:图像的加载被中断。
onblur:元素失去焦点。
onchange:域的内容被改变。
onclick:当用户点击某个对象时调用的事件句柄。
ondblclick:当用户双击某个对象时调用的事件句柄。
onerror:在加载文档或图像时发生错误。
onfocus:元素获得焦点。
onkeydown:某个键盘按键被按下。
onkeypress:某个键盘按键被按下并松开。
onkeyup:某个键盘按键被松开。
onload:一张页面或一幅图像完成加载。
onmousedown:鼠标按钮被按下。
onmousemove:鼠标被移动。
onmouseout:鼠标从某元素移开。
onmouseover:鼠标移到某元素之上。
onmouseup:鼠标按键被松开。
onreset:重置按钮被点击。
onresize:窗口或框架被重新调整大小。
onselect:文本被选中。
onsubmit:确认按钮被点击。
onunload:用户退出页面。

2、鼠标 / 键盘属性

altKey:返回当事件被触发时，"ALT" 是否被按下。
button:返回当事件被触发时，哪个鼠标按钮被点击。
clientX:返回当事件被触发时，鼠标指针的水平坐标。
clientY:返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey:返回当事件被触发时，"CTRL" 键是否被按下。
metaKey:返回当事件被触发时，"meta" 键是否被按下。
relatedTarget:返回与事件的目标节点相关的节点。
screenX:返回当某个事件被触发时，鼠标指针的水平坐标。
screenY:返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey:返回当事件被触发时，"SHIFT" 键是否被按下。

IE 属性：除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

cancelBubble：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement：对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode：对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY：发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue：如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement：对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement：对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y：事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

4、标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

bubbles：返回布尔值，指示事件是否是起泡事件类型。
cancelable：返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget：返回其事件监听器触发该事件的元素。
eventPhase：返回事件传播的当前阶段。
target：返回触发此事件的元素（事件的目标节点）。
timeStamp：返回事件生成的日期和时间。
type：返回当前 Event 对象表示的事件的名称。

5、标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

initEvent()：初始化新创建的 Event 对象的属性。
preventDefault()：通知浏览器不要执行与事件关联的默认动作。
stopPropagation()：不再派发事件。

posted on 2019-03-21 17:18 springsnow 阅读(274) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

工作在浏览器上人-YangBobin