JS高级程序设置笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS高级程序设置笔记相关的知识，希望对你有一定的参考价值。
13章：事件
javascript与html之间的交互，是通过事件实现的。可以使用侦听器（或者处理程序）来预定事件。
13.1事件流：
什么是事件流：事件流描述的是从页面中接收事件的顺序。
13.1.1事件冒泡
什么是事件冒泡：可以用一个形象的比喻来描述。小鱼吐泡泡，小鱼在水里，泡泡会从水的最底部一直到水面上结束。事件冒泡和这个意思相近，IE的事件流叫做事件冒泡，是从最具体的元素开始，一直延伸到最顶层的那个结构。意思就是说，比如你创建了一个鼠标点击事件，当你点击这个元素的时候，浏览器会认为你点击的不只是这一个元素，所以事件会从具体的元素一致延伸到document也就是<html>标签上。
13.1.2事件捕获：
什么是事件捕获：在用一个形象的例子举例，事件捕获就想渔夫打鱼，从水面上撒网，直到抓到鱼。
事件捕获和它意思相近，就是从最不具体的节点一直延伸到最具体的节点。比如你设置一个点击事件，document会先接收到，之后一个一个节点传递，最后达到最具体的那个元素。
13.1.3 DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和时间冒泡阶段。
由图可知：实际目标在事件捕获阶段是不会接收到事件的。这意味这，捕获知识从document到了具体元素的上一个节点就停止了（也就是body）。出于目标阶段就是在div（具体元素上发生），之后冒泡阶段又穿回到文档
多数支持DOM事件流的浏览器都实现了一种特定的行为：在“DOM2级事件”规范在事件捕获阶段是不会涉及到具体目标。但是很多高版本的浏览器都会在捕获阶段就接触到发生事件的对象上，结果就有两个机会在目标上面操作事件。
13.2事件处理程序：
事件就是用户或者浏览器的某个动作。例如点击click等，而相应某个事件的函数就叫做事件处理程序（或者侦听器）。事件处理程序以on开头家加上事件的名称。
13.2.1HTML事件处理程序：
HTML事件处理事件程序就是在元素内部定义一个事件。然后执行相应的函数
<input type="button" value="click me" onclick="try{show()}catch(ex){}" name="hello">
HTML指定时间处理程序具有一定的独岛之处。首先，这样会创建一个封装着元素属性值得函数，这个函数具有一个局部变量event，也就是一个事件对象。通过event就可以直接访问元素内部的属性值（和闭包的原理相似）。<input type="button" value="click me" onclick="alert（this.name）" name="hello">
可以直接访问元素的属性。缺点：也是最重要的一点就是，代码耦合性太强
13.2.2 DOM0级事件处理程序：
方法：先通过document对象取得我们需要的元素，然后再给这个元素添加一个我们需要的事件。优点：简单，跨平台。在事件处理程序中可以通过this访问元素的任何属性和方法，代码举例：
var btn=document.getElementById("btn");
btn.onclick=function(){
alert(this.name);
}
13.2.3DOM2级事件处理程序DOM2级定义两个方法来操作事件处理程序，
添加：addEventListener（）；接收三个参数，第一个是要处理的事件名，作为事件处理程序的函数和一个布尔值，最后这个布尔值如果是正就再事件捕获阶段处理程序，如果是false就在冒泡阶段处理。
删除：removeEventListener（）；接收的参数和上面一样。
注意：1：作为处理程序的函数不要使用匿名函数，否则会造成无法删除事件。2:大多数情况下事件处理程序都添加到事件冒泡的阶段。
例子：
var btn = document.getElementById("btn");
btn.addEventListener("click",show,false);
function show(){
alert(this.name);
}
有点是：耦合性底，可以同时给元素添加多个事件处理程序，顺序按照定义的顺序。
13.2.4IE事件处理程序
IE实现和和DOM类似的两个方法，attchEvent（）和detachEvent（），接收两个参数，一个是需要添加的事件处理程序名称（on+事件）和事件处理函数。
和DOM2级事件处理程序相似区别就是，参数的区别，dom2级接受的第一参数是事件名，而不是事件处理程序名。
例子：
var btn = document.getElementById("btn");
btn.attachEvent("onclick",show);
function show(){
alert(this.name);
}
注意：如果给IE事件添加多个事件处理，那么显示方式就不同了，与DOM正好相反。
13.2.5跨浏览器的事件处理程序
13.3事件对象
在触发DOM上的某个事件时，会产生一个时间对象Event，这个对象包含了所有时间有关的信息。
13.3.1 DOM中的事件对象
var btn = document.getElementById("btn");
btn.addEventListener("click",show,false);
function show(event){
alert(event.type);
}
里面的参数event，就是在触发事件click时产生的对象。这个对象具有的属性：
方法：
13.3.2IE中的事件对象：
就是在触发事件的时候，系统产生的对象。
13.3.3跨浏览器的事件对象：
省略的部分是事件处理程序。
13.4 事件类型：
DOM3级事件规定了一下的几类事件
13.4.1 UI事件
UI事件是哪些不一定与用户操作有关的事件，现有的UI事件如下。
1：DOMActivate：表示元素已经被用户激活，DOM3级事件已经摒弃的了，不建议使用。
2：load：当页面完全加载后在window上面触发。
3：unload：当页面完全卸载后在window上面触发。
4：abort：在用户停止下载的过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。
5：error：当发生JS错误时在window上面触发。
6：select：当用户选择文本框中的一个或者多个字符时触发。
7：resize：当窗口或框架的大小发生时在window或者框架上面触发。
8：scroll：当用户滚动带滚动条的元素中的内容是，在该元素上面触发。
要确定浏览器是否支持DOM2级事件规定的HTML时间，可以用一下代码：
1：load事件
最常用的一个事件就是load，当页面完全加载后（包括所有图像，JS文件CSS外部文件等），就会触发window上面的load事件
第一种方法：
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
这是通过JavaScript 来指定事件处理程序的方式，使用了本章前面定义的跨浏览器的EventUtil对象。
第二种指定onload 事件处理程序的方式是为<body>元素添加一个onload 特性，如下面的例子
所示：
<body onload="alert(‘Loaded!‘)">
建议尽可能使用JavaScript 方式。
2. unload 事件
只要用户从一
个页面切
换到另一个页面，就会发生unload
事件。而利用这个事件最多的情况是清除引用，以避免内存泄漏。
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
3. resize 事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize 事件。
4. scroll 事件
虽然 scroll 事件是在window 对象上发生的，但它实际表示的则是页面中相应元素的变化。在混
杂模式下，可以通过<body>元素的scrollLeft 和scrollTop 来监控到这一变化；
13.4.2 焦点事件
焦点事件会在页面元素获得或失去焦点时触发
1：blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
? DOMFocusIn：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。只有
Opera 支持这个事件。DOM3 级事件废弃了DOMFocusIn，选择了focusin。
2： DOMFocusOut：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。只有Opera
支持这个事件。DOM3 级事件废弃了DOMFocusOut，选择了focusout。
3：focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
4：focusin：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。支持这个
事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。
5： focusout：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。支持这个事件
的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。
这一类事件中最主要的两个是focus 和blur，它们都是JavaScript 早期就得到所有浏览器支持的
事件。这些事件的最大问题是它们不冒泡。
当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
(1) focusout 在失去焦点的元素上触发；
(2) focusin 在获得焦点的元素上触发；
(3) blur 在失去焦点的元素上触发；
(4) DOMFocusOut 在失去焦点的元素上触发；
(5) focus 在获得焦点的元素上触发；
(6) DOMFocusIn 在获得焦点的元素上触发。
其中，blur、DOMFocusOut 和focusout 的事件目标是失去焦点的元素；而focus、DOMFocusIn
和focusin 的事件目标是获得焦点的元素。
要确定浏览器是否支持这些事件，可以使用如下代码：
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
13.4.3 鼠标与滚轮事件
1：click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保
易访问性很重要，意味着onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。
2：dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发
3：mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件
4：mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡
5：mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡
6；mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
7：mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
8：mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触
发
9：mouseup：在用户释放鼠标按钮时触发。
使用以下代码可以检测浏览器是否支持以上DOM2 级事件（除dbclick、mouseenter 和
mouseleave 之外）：
var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");
要检测浏览器是否支持上面的所有事件，可以使用以下代码：
var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")
注意，DOM3 级事件的feature 名是"MouseEvent"，而非"MouseEvents"。
1. 客户区坐标位置
鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的clientX 和
clientY 属性中。
可以使用类似下列代码取得鼠标事件的客户端坐标信息：
var div = document.getElementById("myDiv");//获取ID名为myDIV的元素
EventUtil.addHandler(div, "click", function(event){//调用addHandler启动事件管理程序
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
2. 页面坐标位置
通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的pageX 和
pageY 属性，能告诉你事件是在页面中的什么位置发生的。
以下代码可以取得鼠标事件在页面中的坐标：
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Page coordinates: " + event.pageX + "," + event.pageY);
});
3. 屏幕坐标位置
鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通
过screenX 和screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。
可以使用类似下面的代码取得鼠标事件的屏幕坐标：
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
4. 修改键
这些修改键就是Shift、Ctrl、Alt 和Meta（在Windows 键盘中是Windows 键，在苹果机中
是Cmd 键），它们经常被用来修改鼠标事件的行为。
DOM 为此规定了4 个属性，表示这些修改键的状
态：shiftKey、ctrlKey、altKey 和metaKey。这些属性中包含的都是布尔值
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
ModifierKeysExample01
在这个例子中，我们通过一个onclick 事件处理程序检测了不同修改键的状态。
5、相关元素
mouseover，mouseout事件会涉及更多元素，mouseover，主要目标是获得光标的元素，相关元素是失去光标的元素，mouseout，主要目标是失去光标的元素，相关元素是获得光标的元素
DOM通过event对象的relatedTarget属性提供了相关的信息，这个属性只对mouseover，mouseout事件才包含 值，其他的事件为null，IE8及之前版本不支持，提供其他属性。在mouseover触发时，IE的fromElement保存相关元素，在 mouseout触发，IE的toElement保存相关元素（IE9支持所有这些属性）。把跨浏览器取得相关元素的方法加入到EventUtil对象中
6. 鼠标按钮
mousedown 和mouseup 事件来说，则在其event 对象存在一个button 属性，
表示按下或释放的按钮。DOM的button 属性可能有如下3 个值：0 表示主鼠标按钮，1 表示中间的鼠
标按钮（鼠标滚轮按钮），2 表示次鼠标按钮。在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标
按钮就是鼠标右键
IE8 及之前版本也提供了button 属性，但这个属性的值与DOM 的button 属性有很大差异。
? 0：表示没有按下按钮。
? 1：表示按下了主鼠标按钮。
? 2：表示按下了次鼠标按钮。
? 3：表示同时按下了主、次鼠标按钮。
? 4：表示按下了中间的鼠标按钮。
? 5：表示同时按下了主鼠标按钮和中间的鼠标按钮。
? 6：表示同时按下了次鼠标按钮和中间的鼠标按钮。
? 7：表示同时按下了三个鼠标按钮。
var EventUtil = {
//省略了其他代码
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
} else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//省略了其他代码
};
7. 更多的事件信息
“DOM2 级事件”规范在event 对象中还提供了detail 属性，用于给出有关事件的更多信息。
IE 也通过下列属性为鼠标事件提供了更多信息。
1： altLeft：布尔值，表示是否按下了Alt 键。如果altLeft 的值为true，则altKey 的值也为true。
2： ctrlLeft：布尔值，表示是否按下了Ctrl 键。如果ctrlLeft 的值为true，则ctrlKey 的值
也为true。
3： offsetX：光标相对于目标元素边界的x 坐标。
4： offsetY：光标相对于目标元素边界的y 坐标。
5： shiftLeft：布尔值，表示是否按下了Shift 键。如果shiftLeft 的值为true，则shiftKey
的值也为true。
8. 鼠标滚轮事件
。当用
户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发mousewheel
事件。
与mousewheel 事件对应的event 对象除包含鼠标事件的所有标准信息外，
还包含一个特殊的wheelDelta 属性。当用户向前滚动鼠标滚轮时，wheelDelta 是120 的倍数；当用
户向后滚动鼠标滚轮时，wheelDelta 是?120 的倍数。
将mousewheel 事件处理程序指定给页面中的任何元素或document 对象，即可处理鼠标滚轮的
交互操作。来看下面的例子。
EventUtil.addHandler(document, "mousewheel", function(event){
event = EventUtil.getEvent(event);
alert(event.wheelDelta);
});
Firefox 支持一个名为DOMMouseScroll 的类似事件，也是在鼠标滚轮滚动时触发。。与mousewheel
事件一样，DOMMouseScroll 也被视为鼠标事件，因而包含与鼠标事件有关的所有属性。
保存在detail 属性中，当向前滚动鼠标滚轮时，这个属性的值是-3 的倍数，当向后滚动
鼠标滚轮时，这个属性的值是3 的倍数。
这个简单的事件处理程序会在鼠标滚轮滚动时显示detail 属性的值。
var EventUtil = {
//省略了其他代码
getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
//省略了其他代码
};
这里，getWheelDelta()方法首先检测了事件对象是否包含wheelDelta 属性，如果是则通过浏
览器检测代码确定正确的值。如果wheelDelta 不存在，则假设相应的值保存在detail 属性中。由于
Firefox 的值有所不同，因此首先要将这个值的符号反向，然后再乘以40，就可以保证与其他浏览器的
值相同了。
9. 触摸设备
1：不支持 dblclick 事件。双击浏览器窗口会放大画面，而且没有办法改变该行为。
2：轻击可单击元素会触发mousemove 事件。如果此操作会导致内容变化，将不再有其他事件发生；
如果屏幕没有因此变化，那么会依次发生mousedown、mouseup 和click 事件。轻击不可单
击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素（如链接），或
者那些已经被指定了onclick 事件处理程序的元素。
3：mousemove 事件也会触发mouseover 和mouseout 事件。
4：两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。
13.4.4 键盘与文本事件
对键盘事件的支持主要遵循的是DOM0 级。“DOM3 级事件”为键盘事件制定了规范，IE9 率先完全实现了该规范。
有 3 个键盘事件，简述如下。
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
按下Esc 键也会触发这个事件。Safari 3.1 之前的版本也会在用户按下非字符键时触发keypress
事件。
keyup：当用户释放键盘上的键时触发。
1. 键码
在发生 keydown 和keyup 事件时，event 对象的keyCode 属性中会包含一个代码，与键盘上一对数字字母字符键，keyCode 属性的值与ASCII 码中对应小写字母或数字的编码相
同。
个特定的键对应。
DOM 和IE 的event 对象都支持keyCode 属性
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
event = EventUtil.getEvent(event);
alert(event.keyCode);
});
2. 字符编码
IE9、Firefox、Chrome、Safari的event对象都支持一个charCode属性，只有发生keypress事件才包含值，代表按下的键的ASCII编码。此时keyCode为0或者等于按键键码。
跨浏览器方式取得字符编码
var EventUtil = {
//省略的代码
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
//省略的代码
};
3. DOM3 级变化
DOM3不再包含charCode属性，改为新属性：key，char
key为了取代keyCode新增，值是字符串，按下某个字符键时，是对应的文本字符，按下非字符键，是相应键值（shift等），char属性的值在按下字符键与key相同，按下非字符键为null
IE9+支持key，不支持char，Safari5和Chrome支持名为keyIdentifier的属性，按下非字符键与key同，按下字符键返回格式U+0000的字符串，表Unicode值
注：为跨浏览器，不推荐使用key，keyIdentifier，char
DOM3级事件还添加一个location属性，是一个数值
0：默认键盘
1：左侧位置（左alt）
2：右侧位置（右alt）
3：数字小键盘
4：移动设备键盘（虚拟键盘）
5：手柄（任天堂Wii控制器）
IE9支持这个属性，Safari和Chrome支持名为keyLocation属性，但有bug，值始终为0，除非按下数字键，值为3，否则不会是1245的值
注：支持location浏览器不多，不推荐使用
4. textInput 事件
“DOM3 级事件”规范中引入了一个新事件，名叫textInput。根据规范，当用户在可编辑区域中
输入字符时，就会触发这个事件 。
例子的实现方法都是相类似的：先通过id选择器获得对应的元素，通过ElementUntil实例的addHandler方法，创建跨平台的事件处理程序。添加相应的事件，在事件函数中使用实例的getEvent（event）方法获取当前的event对象，再进行下一步的操作。
在这个例子中，插入到文本框中的字符会通过一个警告框显示出来。
另外，event 对象上还有一个属性，叫inputMethod，表示把文本输入到文本框中的方式。
? 0，表示浏览器不确定是怎么输入的。
? 1，表示是使用键盘输入的。
? 2，表示文本是粘贴进来的。
? 3，表示文本是拖放进来的。
? 4，表示文本是使用IME 输入的。
? 5，表示文本是通过在表单中选择某一项输入的。
? 6，表示文本是通过手写输入的（比如使用手写笔）。
? 7，表示文本是通过语音输入的。
? 8，表示文本是通过几种方法组合输入的。
? 9，表示文本是通过脚本输入的。
使用这个属性可以确定文本是如何输入到控件中的，从而可以验证其有效性。支持textInput 属
性的浏览器有IE9+、Safari 和Chrome。只有IE 支持inputMethod 属性。
5. 设备中的键盘事件
13.4.5 复合事件
复合事件（composition event）是DOM3 级事件中新添加的一类事件，用于处理IME 的输入序列。
IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。复合事件就是针对检测和处理这种输入而设计的。有以下三种复合事件。
1：compositionstart：在IME 的文本复合系统打开时触发，表示要开始输入了。
2：compositionupdate：在向输入字段中插入新字符时触发。
3：compositionend：在IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。
复合事件与文本事件在很多方面都很相似。在触发复合事件时，目标是接收文本的输入字段。但它
比文本事件的事件对象多一个属性data。
13.4.6变动事件
DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示。是为XML或HTML DOM设计的，并不特定于语言。DOM2级变动事件：
DOMSubtreeModified：DOM结构发生任何变化触发，在其他任何事件触发后都会触发
DOMNodeInserted：在一个节点作为子节点被插入到另一个节点时触发
DOMNodeRemoved：节点移除触发
DOMNodeInsertedIntoDocument：在节点被直接插入文档或通过子树间接插入文档之后触发，在DOMNodeInserted之后触发
DOMNodeRemovedFromDocument：在节点被直接从文档或通过子树间接从文档中移除之前触发，在DOMNodeRemoved之后触发
DOMAttrModified：特性被修改触发
DOMCharacterDataModified：在文本节点值发生变化触发
1. 删除节点
在使用removeChild()或replaceChild()从DOM中删除节点时，首先会触发DOMNodeRemoved
事件。
<! DOCTYPE html>
<html>
<head>
<title>Node Removal Events Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
在这个例子中，我们假设要移除<ul>元素。此时，就会依次触发以下事件。
(1) 在<ul>元素上触发DOMNodeRemoved 事件。relatedNode 属性等于document.body。
(2) 在<ul>元素上触发DOMNodeRemovedFromDocument 事件。
(3) 在身为<ul>元素子节点的每个<li>元素及文本节点上触发DOMNodeRemovedFromDocument
事件。
(4) 在document.body 上触发DOMSubtreeModified 事件，因为<ul>元素是document.body
的直接子元素。
以上代码为 document 添加了针对DOMSubtreeModified 和DOMNodeRemoved 事件的处理程序，
以便在页面上处理这些事件。由于DOMNodeRemovedFromDocument 不会冒泡，所以我们将针对它的
事件处理程序直接添加给了<ul>元素的第一个子节点（在兼容DOM 的浏览器中是一个文本节点）。在
设置了以上事件处理程序后，代码从文档中移除了<ul>元素。
13.4.7 HTML5 事件
1. contextmenu 事件
contextmenu 这个事件，用以表示何时应该显示上下文
菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
2. beforeunload 事件
之所以有发生在window 对象上的beforeunload 事件，是为了让开发人员有可能在页面卸载前
阻止这一操作。
3. DOMContentLoaded 事件
DOMContentLoaded 事件则在形成完整的DOM 树之后就会触发，
不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。与load 事件不同，
DOMContentLoaded 支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面
进行交互。
4、readystatechange事件
这个事件行为很难预料，支持的对象都有一个readyState属性，值包含：
uninitiallized（未初始化）：对象存在但尚未初始化
loading（正在加载）：对象正在加载
loaded（加载完毕）：对象数据加载完成
interactive（交互）：可以操作对象了，但还没有完全加载
complete（完成）：对象已加载完毕
这个事件的event对象不提供任何信息，也没有目标对象
5、pageshow和pagehide事件
Firefox和Opera特性，往返缓存，可以在用户使用浏览器的后退前进按钮加快页面转换速度。
Firefox提供新事件：
pageshow，在页面显示时触发。注：必须将事件处理程序添加到window中
以上是关于JS高级程序设置笔记的主要内容，如果未能解决你的问题，请参考以下文章