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>

获取查询参数

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 访问该对象的方法做出了限制。

属性

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

方法

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

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 对象包含有关访问者浏览器的信息。

属性

• 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 数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 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"( ) 来设置换行。

alert("Hello
How 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()：不再派发事件.