首页 > 代码库 > 《javascript高级程序设计》笔记（十三）
《javascript高级程序设计》笔记（十三）
---恢复内容开始---
事件
（一）事件流
描述从页面接收事件的顺序。
1.事件冒泡
IE的事件流，从最具体的元素接收，逐级向上传播到不具体的节点。
IE9 Fireofx Chrome Safari将事件一直冒泡到window对象
2.事件捕获
不太具体的节点应更早接受事件。
3.DOM事件流
包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
IE8及更早版本不支持DOM事件流。
（二）事件处理程序
相应某个事件的函数，名字以on开头。
1.HTML事件处理程序
<input type="button" value="http://www.mamicode.com/Click Me" onclick="alert(‘Clicked‘)" />
onclick的值是javascript，不能在其中使用未经转义的HTML语法字符。如 & " < >。
创建一个封装着元素属性值的函数，有一个局部变量event，也就是事件对象，this值等于事件的目标元素。
扩展作用域让事件处理程序无需引用表单元素就能访问其他表单字段。
缺点： 1.时差问题 2.扩展作用域链在不同浏览器会导致不同结果 3.HTML与javascript代码紧密耦合。
2.DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性。简单，具有跨浏览器的优势。
先要取得操作对象的引用， 然后为它指定事件处理程序。在这些代码运行以前不会指定事件处理程序。
btn.onclick = function(){ alert(this.id); };
删除：只要将数值的值设置为null。
3.DOM2级事件处理程序
addEventListener() 接收三个参数：事件名、事件处理程序的函数、一个布尔值。布尔值为true则在不会阶段调用时间出来程序。
可以添加多个事件处理程序，按照添加顺序触发。
btn.addEventListener("click", function(){ alert(this.id); }, false);
只能用removeEventListener()移除，addEventListener()添加的匿名函数无法移除。
IE9 Firefox Safari Chrome Opera 支持
4.IE事件处理程序
attachEvent() detachEvent() 接收参数：事件处理程序名称与事件处理程序函数。
btn.attachEvent("onclick", function(){ alert("Clicked"); });第一个参数是"onclick" 而不是"click"。
在DOM0级方法下，事件处理程序会在其所属元素的作用域运行，而attachEvent()在全局作用域运行，this等于window。
attachEvent()可以添加多个事件处理程序，但以相反的顺序触发。
detachEvent()移除attachEvent()添加的时间，添加的匿名函数不能移除。但只要能将对相同函数的引用传递给detachEvent()就能移除。
5.跨浏览器的事件处理程序
addHandler: function(element, type, handler){ if (element.addEventListener){//DOM2级 element.addEventListener(type, handler, false); } else if (element.attachEvent){//IE方法 element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }
（三）事件对象
在触发DOM的某个事件，会产生一个事件对象event。
1.DOM中的事件对象
兼容DOM（0级或2级）的浏览器会将一个event对象传入事件处理程序。
btn.onclock = function(event){ alert(event.type); //"click"} btn.addEventListener ("click", function(event){ alert(event.type); //"click"},false);
需要通过一个函数处理多个事件时，可以使用type属性。
var btn = document.getElementById("myBtn"); var handler = function(event){ switch(event.type){ case "click": alert("Clicked"); break; case "mouseover": event.target.style.backgroundColor = "red"; break; case "mouseout": event.target.style.backgroundColor = ""; break; } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler;
preventDefault() 阻止特定事件的默认行为，只有cancelable属性设置为true才可以。
stopPropagation()方法 立即停止事件在DOM层次中传播，即取消进一步的事件捕获或冒泡。
eventPhase属性 用来确定事件当前正位于事件流的哪个阶段。
只有在事件处理程序执行期间，event对象才会存在。
2.IE中的事件对象
使用DOM0级方法添加事件处理程序，event对象作为window对象的一个属性。
如果事件处理程序使用attachEvent()添加，会有一个event对象作为参数被传入事件处理程序。
如果通过HTML特性指定事件处理程序，还可以通过event变量来访问event对象。
不能认为this始终等于事件目标，使用event.srcElement比较保险。
btn.onclick = function(){ alert(window.event.srcElement === this); //true }; btn.attachEvent("onclick", function(event){ alert(event.srcElement === this); //false });
returnValue属性 取消给定事件的默认行为，只需将returnValue设置为false。
cancelBubble属性 停止事件冒泡
3.跨浏览器事件对象
（四）事件类型
1.UI事件
是指不一定与用户操作有关的事件。多数这些事件都与window对象或表单控件有关。
①load事件
当页面完全加载后（包括图像、javascript文件、CSS文件等），就会触发window上的load事件。
方法一：
EventUtil.addHandler(window, "load", function(event){ alert("Loaded!"); });
传入的event对象中不包含有关这个事件的附加信息，但在兼容DOM的浏览器里event.target属性的值会被设置为document
方法二：
为<body>元素添加onload特性
<body onl oad="alert(‘Loaded!‘)">
图片上也能触发load事件
1 var image = document.getElementById("myImage");2 EventUtil.addHandler(image, "load", function(event){ //element.addEventListener与element.attachEvent3 event = EventUtil.getEvent(event); //event与window.event4 alert(EventUtil.getTarget(event).src); //event.target与event.srcElement5 });
新创建的<img>元素可以指定事件检测其加载完毕，需要在指定src属性前先指定事件。如果再页面加载前操作document.body会导致错误。
EventUtil.addHandler(image, "load", function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); }); document.body.appendChild(image); image.src = "smile.gif";
在不处于DOM文档的图像（包括未添加到文档的<img>元素和Image对象）上触发load事件时，IE8及之前版本不会生成event对象。
IE9+ firefox Opera Chrome Safari3+ <script>元素也会触发load事件，以便确定动态加载的javascript文件是否加载完毕，只有设置了<script>元素的src属性并将该元素添加到文档后才会开始下载javascript文件。src属性与制定事件处理程序的顺序不重要。
②unload事件
在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面。利用这个事件最多的是清楚引用，以免内存泄露。
既然unload是在一切都被卸载后触发，那么页面加载后存在的对象，此时不一定存在。此时操作DOM节点或元素样式会出错。
③resize事件
当浏览器窗口被调整到一个新的高度或宽度会触发。这个事件在window上触发，因此可以通过javascript或<body>元素的onresize特性来指定事件处理程序。
④scroll事件
2.焦点事件
3.鼠标与滚轮事件
4.键盘与文本事件
5.复合事件
6.变动事件
7.HTML5事件
8.设备事件
9.触摸与手势事件
（五）内存与性能
1.事件委托
2.移除事件处理程序
（六）模拟事件
1.DOM中的事件模拟
2.IE中的事件模拟
---恢复内容结束---
事件
（一）事件流
描述从页面接收事件的顺序。
1.事件冒泡
IE的事件流，从最具体的元素接收，逐级向上传播到不具体的节点。
IE9 Fireofx Chrome Safari将事件一直冒泡到window对象
2.事件捕获
不太具体的节点应更早接受事件。
3.DOM事件流
包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
IE8及更早版本不支持DOM事件流。
（二）事件处理程序
相应某个事件的函数，名字以on开头。
1.HTML事件处理程序
<input type="button" value="http://www.mamicode.com/Click Me" onclick="alert(‘Clicked‘)" />
onclick的值是javascript，不能在其中使用未经转义的HTML语法字符。如 & " < >。
创建一个封装着元素属性值的函数，有一个局部变量event，也就是事件对象，this值等于事件的目标元素。
扩展作用域让事件处理程序无需引用表单元素就能访问其他表单字段。
缺点： 1.时差问题 2.扩展作用域链在不同浏览器会导致不同结果 3.HTML与javascript代码紧密耦合。
2.DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性。简单，具有跨浏览器的优势。
先要取得操作对象的引用， 然后为它指定事件处理程序。在这些代码运行以前不会指定事件处理程序。
btn.onclick = function(){ alert(this.id); };
删除：只要将数值的值设置为null。
3.DOM2级事件处理程序
addEventListener() 接收三个参数：事件名、事件处理程序的函数、一个布尔值。布尔值为true则在不会阶段调用时间出来程序。
可以添加多个事件处理程序，按照添加顺序触发。
btn.addEventListener("click", function(){ alert(this.id); }, false);
只能用removeEventListener()移除，addEventListener()添加的匿名函数无法移除。
IE9 Firefox Safari Chrome Opera 支持
4.IE事件处理程序
attachEvent() detachEvent() 接收参数：事件处理程序名称与事件处理程序函数。
btn.attachEvent("onclick", function(){ alert("Clicked"); });第一个参数是"onclick" 而不是"click"。
在DOM0级方法下，事件处理程序会在其所属元素的作用域运行，而attachEvent()在全局作用域运行，this等于window。
attachEvent()可以添加多个事件处理程序，但以相反的顺序触发。
detachEvent()移除attachEvent()添加的时间，添加的匿名函数不能移除。但只要能将对相同函数的引用传递给detachEvent()就能移除。
5.跨浏览器的事件处理程序
addHandler: function(element, type, handler){ if (element.addEventListener){//DOM2级 element.addEventListener(type, handler, false); } else if (element.attachEvent){//IE方法 element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }
（三）事件对象
在触发DOM的某个事件，会产生一个事件对象event。
1.DOM中的事件对象
兼容DOM（0级或2级）的浏览器会将一个event对象传入事件处理程序。
btn.onclock = function(event){ alert(event.type); //"click"} btn.addEventListener ("click", function(event){ alert(event.type); //"click"},false);
需要通过一个函数处理多个事件时，可以使用type属性。
var btn = document.getElementById("myBtn"); var handler = function(event){ switch(event.type){ case "click": alert("Clicked"); break; case "mouseover": event.target.style.backgroundColor = "red"; break; case "mouseout": event.target.style.backgroundColor = ""; break; } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler;
preventDefault() 阻止特定事件的默认行为，只有cancelable属性设置为true才可以。
stopPropagation()方法 立即停止事件在DOM层次中传播，即取消进一步的事件捕获或冒泡。
eventPhase属性 用来确定事件当前正位于事件流的哪个阶段。
只有在事件处理程序执行期间，event对象才会存在。
2.IE中的事件对象
使用DOM0级方法添加事件处理程序，event对象作为window对象的一个属性。
如果事件处理程序使用attachEvent()添加，会有一个event对象作为参数被传入事件处理程序。
如果通过HTML特性指定事件处理程序，还可以通过event变量来访问event对象。
不能认为this始终等于事件目标，使用event.srcElement比较保险。
btn.onclick = function(){ alert(window.event.srcElement === this); //true }; btn.attachEvent("onclick", function(event){ alert(event.srcElement === this); //false });
returnValue属性 取消给定事件的默认行为，只需将returnValue设置为false。
cancelBubble属性 停止事件冒泡
3.跨浏览器事件对象
（四）事件类型
1.UI事件
是指不一定与用户操作有关的事件。多数这些事件都与window对象或表单控件有关。
①load事件
当页面完全加载后（包括图像、javascript文件、CSS文件等），就会触发window上的load事件。
方法一：
EventUtil.addHandler(window, "load", function(event){ alert("Loaded!"); });
传入的event对象中不包含有关这个事件的附加信息，但在兼容DOM的浏览器里event.target属性的值会被设置为document
方法二：
为<body>元素添加onload特性
<body onl oad="alert(‘Loaded!‘)">
图片上也能触发load事件
1 var image = document.getElementById("myImage");2 EventUtil.addHandler(image, "load", function(event){ //element.addEventListener与element.attachEvent3 event = EventUtil.getEvent(event); //event与window.event4 alert(EventUtil.getTarget(event).src); //event.target与event.srcElement5 });
新创建的<img>元素可以指定事件检测其加载完毕，需要在指定src属性前先指定事件。如果再页面加载前操作document.body会导致错误。
EventUtil.addHandler(image, "load", function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); }); document.body.appendChild(image); image.src = "smile.gif";
在不处于DOM文档的图像（包括未添加到文档的<img>元素和Image对象）上触发load事件时，IE8及之前版本不会生成event对象。
IE9+ firefox Opera Chrome Safari3+ <script>元素也会触发load事件，以便确定动态加载的javascript文件是否加载完毕，只有设置了<script>元素的src属性并将该元素添加到文档后才会开始下载javascript文件。src属性与制定事件处理程序的顺序不重要。
②unload事件
在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面。利用这个事件最多的是清楚引用，以免内存泄露。
既然unload是在一切都被卸载后触发，那么页面加载后存在的对象，此时不一定存在。此时操作DOM节点或元素样式会出错。
③resize事件
当浏览器窗口被调整到一个新的高度或宽度会触发。这个事件在window上触发，因此可以通过javascript或<body>元素的onresize特性来指定事件处理程序。
④scroll事件
通过scrollLeft和scrollTop来监控
2.焦点事件
blur：失去焦点时触发，不会冒泡
focus：获取焦点时触发，不会冒泡
focusin：获取焦点时触发，冒泡。Firefox不支持。
focusout：失去焦点时触发，冒泡。Firefox不支持。
3.鼠标与滚轮事件
click dblclick mousedown moseenter mouseleave mousemove mouseout mouseover mouseup
除了mouseenter和mouseleave所有都会冒泡。
只有在同一元素触发mousedown和mouseup才会触发click事件，只有触发两次click事件才会触发dbclick事件。
①客户区坐标位置
浏览器视口
clientX clientY
EventUtil.addHandler(div, "click", function(event){//addEventListener和attachEvent event = EventUtil.getEvent(event); //event : window.event alert("Client coordinates: " + event.clientX + "," + event.clientY); });
②页面坐标位置
pageX pageY
IE8及更早版本不支持，但可以用客户区坐标和滚动信息计算出。要用到scrollLeft和scrollTop属性。
③屏幕坐标位置
screenX screenY
④修改键
Shift Ctril Alt Meta（windows的window键和苹果的Cmd键）
shiftKey ctrilKey altKey metaKey属性，如果相应键被按下返回true。
IE8及之前版本不支持metaKey。
⑤相关元素
对mouseout事件，主目标是失去光标的元素，相关元素是获得目标的元素。
relatedTarget属性提供相关元素的信息，只有mouseover和mouseout事件才包含值。
IE8及之前不支持，mouseover触发时fromElement属性，mouseout触发时toElement属性（IE9支持所有）。
⑥鼠标按键
对mousedown和mouseup，其event存在button属性，表示按下或释放的按钮。
DOM的button属性： 0：主鼠标按钮 1：中间的鼠标按钮 2：次鼠标按钮
IE8及之前版本也有button属性，但值与DOM的不同。
支持DOM鼠标事件的浏览器可以通过hasFeature()方法来检测。
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; } }
⑦更多的事件信息
detail属性 ，对于鼠标事件包含一个数值表示给定位置单击了几次。如果鼠标在mousedown和mouseup直接移动则detail清0。
⑧鼠标滚轮事件
mousewheel 鼠标滚轮在垂直方向滚动时触发，最终冒泡到document（IE8）或window（IE9+、Opera、Chorme、Safari）对象。
wheelDelta属性：向前滚动时是120的倍数，向后滚动是-120的倍数。
Opera9.5之前安保wheelDelta正负颠倒。
Firefox有DOMMouseScroll事件，冒泡到window对象。信息保存在detail属性，向前滚动时值为-3的倍数，向后时是3的倍数。
⑨触摸设备
不支持dblclick事件。
mousemove事件会触发mouseover和mouseout事件。
两个手指放在屏幕且页面随手指移动而滚动时触发mousewheel和scroll事件。
⑩无障碍问题
4.键盘与文本事件
keydown：按下任意键是触发，按住不放会重复触发。
keypress：按下字符键时触发，按住不放会重复触发。
keyup：释放键时触发。
textInput：文本插入文本框前触发。
①键码
发生在keydownhekeyup时event对象的keyCode属性包含一个代码，对数字字母字符键值，keyCode值域ASCII码的小写字母或数字的编码相同。
②字符编码
按下或删除字符的键都能触发keypress事件。
charCode属性 值是按下字符的ASCII键码。IE8及之前版本和Opera子keyCode中保存字符的ASCII编码。
③DOM3级变化
key：值等于相应的文本字符，按下非字符键时，key的值是相应键的名。
char：按下字符键时与key相同，按下非字符键时返回null。
IE9支持key，不支持char，Safari 5和Chrome支持keIdentifier属性。
④textInput事件
event对象包含data属性，值是输入的字符。
event对象的inputMethod属性表示把字符输入到文本框的方式。
IE9+ Safari Chrome
⑤设备的键盘事件
5.复合事件
6.变动事件
能在DOM中某一部分发生变化时给出提示。
IE8及更早版本不支持任何变动事件。
①删除结点
使用removeChild()或replaceChild()时先触发DOMNodeRemoved事件，event.relatedNode属性包含对目标节点父节点的引用。
如果被删除的节点包含子节点，则其所有子节点及这个被移除的节点会相继触发DOMNodeRemovedFromDocument事件。但这个事件不会冒泡，只有直接指定给其中一个子节点的事件处理程序才会被调用。
接着触发的是DOMSubtreeModified事件。
②插入节点
使用appendChild()、replaceChild()、或insertBefore()向DOM插入节点时，先触发DOMNodeInserted事件。event.relatedNode属性包含一个对父节点的引用。这个事件触发时节点已经插到新的父节点。
接着在新插的节点触发DOMNodeInsertedIntoDocument事件。这个事件不冒泡，必须在插入节点前为它添加事件处理程序。这个事件的目标是被插入的节点。
最后触发额是DOMSsbtreeModified，触发于新插入节点的父节点。
7.HTML5事件
①contextmenu事件
用以表示合适应该显示上下文菜单，提供自定义的菜单。
contextmenu事件是冒泡的，因此可以为document指定一个事件处理程序，用以处理页面发生的所有此类事件。
取消：兼容DOM的浏览器使用event.preventDefalut()；IE里将event.returnValue的值设置为false。
IE、Firefox、Safari、Chorme、Opera11+
②beforeunload事件
在浏览器卸载页面前触发，可以通过它来取消卸载并继续使用页面。
将event.returnValue的值设置为要显示给用户的字符串（IE和Firefox），同时作为函数的值返回（对Safari和Chrome）。
③DOMContentLoaded事件
形成DOM树之后就触发，不理会图片、javascript文件CSS文件或其他资源是否已经下载完毕，支持在页面下载的早期添加事件处理程序。
可以为document或window添加相应的事件处理程序。
IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持。
④readystatechange事件
提供与文档或元素加载状态有关的信息。支持这个事件的对象都有readyStage属性。
IE、Firefox 4+ Opera
⑤pageshow和pagehide事件
pageshow在页面显示时触发，event对象包含一个persisted的布尔值属性，如果页面被保存在bfcache中，这个属性值为true。
pagehide会在浏览器写在页面时触发，在unload事件之前触发。
Firefox、Safari 5+、Chrome、Opera。IE9及之前版本不支持。
⑥hashchange事件
可以在URL的参数列表（及ULR中#符号后面的所有字符串）发生变化时通知开发人员。在Ajax里开发人员经常要利用URL参数列表来保存状态或导航信息。
把hashchange事件处理程序添加给window对象，URL参数列表只要变化就会调用它，event对象包含额外属性：oldURL和newURL。
支持hashchange IE8+ Firefox3.6+ Safari 5+ Chrome Opera 10.6+
8.设备事件
①orientationchange事件
移动Safari的window.orientation属性可能包含3个值： 0表示肖像模式，90表示左旋转的横向模式，-90表示右旋转的横向模式。
②MozOrientation事件
Firefox 3.6为设备的方向引入新事件。当设备的加速计检测到设备方向改变时会触发。
只能提供一个平面的方向改变，在window对象上触发。
event对象包含3个属性：x、y、z，值介于1到-1之间。
③deviceorientation事件
触发这个事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。
④devicemotion事件
告诉开发人员设备什么时候移动
9.触摸与手势事件
①触摸事件
touchstart touchmove touchend touchcancel
每个触摸事件的event对象都提供了鼠标事件的常见属性，还包含用于跟踪触摸的属性：touches targetTouchs changeTouches.
②手势事件
（五）内存与性能
1.事件委托
利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
在DOM树中尽量最高的层次上添加一个事件处理程序。
<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li> <li id="sayHi">Say hi</li> </ul>
var list = document.getElementById("myLinks"); EventUtil.addHandler(list, "click", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch(target.id){ case "doSomething": document.title = "I changed the document‘s title"; break; case "goSomewhere": location.href = "http://www.wrox.com"; break; case "sayHi": alert("hi"); break; } });
最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup、keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理不容易，而且经常要计算元素位置。
2.移除事件处理程序
内存里过时不用的“空事件处理程序”也是造成Web应用程序内存与性能问题的主要原因。
从稳定中移除带有事件处理程序的元素时，可能是通过纯粹的DOM操作，如使用removeChild()和replaceChild()方法，但更多是使用innerHTML替换页面某一部分。
btn.clock = function() { //某些操作 btn.onclock = null; //移除事件处理程序 document.getElementById("myDiv").innerHTML = "Processing..";}
在事件处理程序中删除按钮也能阻止事件冒泡。
如果页面被卸载之前没有清理干净事件处理程序，它们会留在内存。最好是在页面卸载前先通过onunload事件处理程序移除所有事件处理程序（页面不会被缓存在bfcache）。
（六）模拟事件
IE9、Opera、Firefox、Chrome和Safari都支持DOM2级的模拟事件。
1.DOM中的事件模拟
在document对象上使用createEvent()方法创建event对象，这个方法接收一个参数，即要创建的事件类型的字符串。在DOM2级是使用英文复数表示，在DOM3级变成单数。
UIEvents ： 一般化UI事件。
MouseEvents ：一般化鼠标事件。
MutationEvents ：一般化DOM变动事件
HTMLEvents ：一般化HTML事件，没有对应的DOM3级事件。
创建event对象之后还要使用与事件有关的信息进行初始化。每种event都有对应的方法传入数据来初始化。触发需要用dispatchEvent()方法，需要传入要触发事件的event对象作为参数。
①模拟鼠标事件
为createEvents()方法传入字符串mouseEvents，返回的对象有一个名为initMouseEvent()方法指定相关信息，这个方法接收15个参数。其中：
type ：要触发的事件类型，如"click"。
bubbles ：事件是否冒泡，应该设置为true。
cancelable ：事件是否可以取消，应该设置为true。
view ：与事件关联的视图，几乎总是document.defaultView。
//创建事件对象 var event = document.createEvent("MouseEvents"); //初始化事件对象 event.initMouseEvent("click", true, true, document.defaultView, 0, 100, 0, 0, 0, false, false, false, false, 0, btn2); //触发对象 btn.dispatchEvent(event);
②模拟键盘事件
DOM3级规定，调用createElement()并传入keyboardEvent就可以创建键盘事件。返回的事件对象包含一个initKeyEvent()方法。
只能用来模拟keydown和keyup事件。
③模拟其他事件
模拟变动事件，可以使用createEvent("MutationEvents")创建一个包含initMutationEvent()方法的变动事件对象。
要模拟HTML事件，也要创建一个event事件
④自定义DOM事件
createEvent("CustomEvent")
2.IE中的事件模拟
调用document.createEventObject()方法可以在IE创建event对象，但不接受参数，结果返回一个通用的event对象。然后手工添加信息，最后再目标上调用fireEvent()方法，这个方法接收两个参数：事件处理程序的名字和event对象。在调用fireEvent()时会自动为event对象添加srcElement和type属性，其他要手工添加。
《javascript高级程序设计》笔记（十三）