事件冒泡：
IE 的事件流，事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Event Bubbling Example</title> 5 </head> 6 <body> 7 <div id="myDiv">Click Me</div> 8 </body> 9 </html>
如果你单击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：
(1) <div>
(2) <body>
(3) <html>
(4) document
事件捕获：
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
前面的例子如果是事件捕获的话，那么单击<div>元素就会以下列顺序触发 click 事件：
(1) document
(2) <html>
(3) <body>
(4) <div>
“ DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
以前面的例子为例，单击div后事件流过程是这样的：
HTML事件处理程序：
如果单击一个按钮执行事件的话，可以采用以下两种方式：
第一种： <input type="button" value="Click Me" onclick="alert('Clicked')" />
第二种：
1 <script type="text/javascript"> 2 function showMessage(){ 3 alert("Hello world!"); 4 } 5 </script> 6 <input type="button" value="Click Me" onclick="showMessage()" />
第二种方法创建了一个封装着元素属性值的函数，这个函数中有一个局部变量 event，也就是事件对象。通过 event 变量，可以直接访问事件对象，你不用自己定义它，也不用从函数的参数列表中读取。
例如查看事件的类型，可以通过event.type获得，单击事件输出类型为click。
在 HTML 中指定事件处理程序的缺点如下：
- 首先，存在一个时差问题。因为用户可能会在HTML 元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
- 这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
- HTML 与 JavaScript 代码紧密耦合。
DOM0 级事件处理程序：
通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
要使用 JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。找到引用之后，将这个引用的属性的值设置为一个函数。
使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的 this 引用当前元素。例如：
1 var btn = document.getElementById("myBtn"); 2 btn.onclick = function(){ 3 alert(this.id); //"myBtn" 4 };
如果想撤销事件，就将事件处理的属性设置为null就可以了，例如： btn.onclick = null; //删除事件处理程序
DOM2 级事件处理程序：
定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener()和 removeEventListener()。
所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获
阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
要在按钮上为 click 事件添加事件处理程序，可以使用下列代码：：
1 var btn = document.getElementById("myBtn"); 2 btn.addEventListener("click", function(){ 3 alert(this.id); 4 }, false);
如果为同一元素定义了两个事件，这两个事件将会按照添加的顺序进行触发。
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除。
1 var btn = document.getElementById("myBtn"); 2 btn.addEventListener("click", function(){ 3 alert(this.id); 4 }, false); 5 btn.removeEventListener("click", function(){ //没有用！ 6 alert(this.id); 7 }, false);
但是下列代码就可以移除事件处理程序：
1 var btn = document.getElementById("myBtn"); 2 var handler = function(){ 3 alert(this.id); 4 }; 5 btn.addEventListener("click", handler, false); 6 //这里省略了其他代码 7 btn.removeEventListener("click", handler, false); //有效！
因为两个事件处理程序使用了相同的函数。
IE事件处理程序：
IE 实现了与 DOM 中类似的两个方法： attachEvent()和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。例如：
1 var btn = document.getElementById("myBtn"); 2 btn.attachEvent("onclick", function(){ 3 alert("Clicked"); 4 });
在 IE 中使用 attachEvent()与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使用 DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用 attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。例如：
1 var btn = document.getElementById("myBtn"); 2 btn.attachEvent("onclick", function(){ 3 alert(this === window); //true 4 });
用attachEvent()方法也可以用来为一个元素添加多个事件处理程序，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发，先添加后执行。
使用 attachEvent()添加的事件可以通过 detachEvent()来移除，条件是必须提供相同的参数。同样匿名函数不能被删除，只能传入同一个引用。
跨浏览器的事件处理程序：
addHandler()：视情况分别使用 DOM0 级方法、 DOM2 级方法或 IE 方法来添加事件。这个方法属于一个名叫 EventUtil 的对象，addHandler()方法接受 3 个参数：要操作的元素、事件名称和事件处理程序函数。
removeHandler()：它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用 DOM0 级方法。
EventUtil类定义如下：
1 var EventUtil = { 2 addHandler: function(element, type, handler){ 3 if (element.addEventListener){ 4 element.addEventListener(type, handler, false); 5 } else if (element.attachEvent){ 6 element.attachEvent("on" + type, handler); 7 } else { 8 element["on" + type] = handler; 9 } 10 }, 11 removeHandler: function(element, type, handler){ 12 if (element.removeEventListener){ 13 element.removeEventListener(type, handler, false); 14 } else if (element.detachEvent){ 15 element.detachEvent("on" + type, handler); 16 } else { 17 element["on" + type] = null; 18 } 19 } 20 };
可以像下面这样使用EventUtil 对象：
1 var btn = document.getElementById("myBtn"); 2 var handler = function(){ 3 alert("Clicked"); 4 }; 5 EventUtil.addHandler(btn, "click", handler); 6 //这里省略了其他代码 7 EventUtil.removeHandler(btn, "click", handler);
事件对象：在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持 event 对象，但支持方式不同。
DOM中的事件对象：
event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。
举例：
1 var btn = document.getElementById("myBtn"); 2 btn.onclick = function(event){ 3 alert(event.currentTarget === this); //true 4 alert(event.target === this); //true 5 };
以上代码检测了 currentTarget 和 target 与 this 的值。由于 click 事件的目标是按钮，因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中（例如 document.body），那么这些值是不相同的。例如：
1 document.body.onclick = function(event){ 2 alert(event.currentTarget === document.body); //true 3 alert(this === document.body); //true 4 alert(event.target === document.getElementById("myBtn")); //true 5 };
当单击这个例子中的按钮时， this 和 currentTarget 都等于 document.body，因为事件处理程序是注册到这个元素上的。然而， target 元素却等于按钮元素，因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序，结果 click 事件就冒泡到了 document.body，在那里事件才得到了处理。
event.preventDefault()：阻止特定事件的默认行为。只有 cancelable 属性设置为 true 的事件，才可以使用 preventDefault()来取消其默认行为。例如，链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick 事件处理程序可以取消它。例如：
1 var link = document.getElementById("myLink"); 2 link.onclick = function(event){ 3 event.preventDefault(); 4 };
event.stopPropagation()：用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。例如：
1 var btn = document.getElementById("myBtn"); 2 btn.onclick = function(event){ 3 alert("Clicked"); 4 event.stopPropagation(); 5 }; 6 document.body.onclick = function(event){ 7 alert("Body clicked"); 8 };
对于这个例子而言，如果不调用 stopPropagation()，就会在单击按钮时出现两个警告框。可是，由于 click 事件根本不会传播到 document.body，因此就不会触发注册在这个元素上的 onclick 事件处理程序。
event.eventPhase属性：可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么 eventPhase 等于 1；如果事件处理程序处于目标对象上，则 eventPhase 等于 2；如果是在冒泡阶段调用的事件处理程序， eventPhase 等于 3。这里要注意的是，尽管“处于目标”发生在冒泡阶段，但 eventPhase 仍然一直等于 2。
IE中的事件对象：
要访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。
- 在使用 DOM0 级方法添加事件处理程序时， event 对象作为 window 对象的一个属性存在，可以通过 window.event 取得了 event 对象。例如：
-
1 var btn = document.getElementById("myBtn"); 2 btn.onclick = function(){ 3 var event = window.event; 4 alert(event.type); //"click" 5 };
- 如果事件处理程序是使用 attachEvent()添加的，那么就会有一个 event 对象作为参数被传入事件处理程序函数中。也可以通过 window 对象来访问 event 对象，就像使用DOM0 级方法时一样。例如：
-
1 var btn = document.getElementById("myBtn"); 2 btn.attachEvent("onclick", function(event){ 3 alert(event.type); //"click" 4 });
- 如果是通过 HTML 特性指定的事件处理程序，那么还可以通过一个名叫 event 的变量来访问 event对象（与 DOM 中的事件模型相同）。例如：
-
<input type="button" value="Click Me" onclick="alert(event.type)">
event.srcElement属性 ：事件的目标（与DOM中的target属性相同）。
event.returnValue属性：相当于 DOM 中的 preventDefault()方法。只要将 returnValue 设置为 false，就可以阻止默认行为。
event.cancelBubble属性：与 DOM 中的 stopPropagation()方法作用相同，都是用来停止事件冒泡的。由于 IE 不支持事件捕获，因而只能取消事件冒泡；但stopPropagatioin()可以同时取消事件捕获和冒泡。 将 cancelBubble 设置为 true，就可阻止事件通过冒泡而触发document.body 中注册的事件处理程序。
事件类型：
- UI事件：
- load事件：JavaScript 中最常用的一个事件就是 load。当页面完全加载后（包括所有图像、 JavaScript 文件、CSS 文件等外部资源），就会触发 window 上面的 load 事件。
定义load事件有两种方式：第一种方式如下： -
1 EventUtil.addHandler(window, "load", function(event){ 2 alert("Loaded!"); 3 });
第二种方式：为<body>元素添加一个 onload 特性，但这种方式只能添加一个事件处理程序。也可以用上述两种方式为图像等元素增加onload事件。
- unload事件：这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生 unload 事件。添加事件的方式与load方式一样。
- resize事件：浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。浏览器窗口最小化或最大化时也会触发 resize事件。关于何时会触发 resize 事件，不同浏览器有不同的机制。
- scroll 事件
- load事件：JavaScript 中最常用的一个事件就是 load。当页面完全加载后（包括所有图像、 JavaScript 文件、CSS 文件等外部资源），就会触发 window 上面的 load 事件。
- 焦点事件：焦点事件会在页面元素获得或失去焦点时触发。
- blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
- focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
- focusin：在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。
- focusout：在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。
- 当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
- focusout 在失去焦点的元素上触发；
- focusin 在获得焦点的元素上触发；
- blur 在失去焦点的元素上触发；
- focus 在获得焦点的元素上触发；
- 鼠标与滚轮事件：
- click:在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。
- dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
- mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
- mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
- mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
- mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
- mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
- mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。
- mousewheel：除包含鼠标事件的所有标准信息外，还包含一个特殊的 wheelDelta 属性。。当用户向前滚动鼠标滚轮时， wheelDelta 是 120 的倍数；当用
户向后滚动鼠标滚轮时， wheelDelta 是120 的倍数。这个事件可以在任何元素上面触发，最终会冒泡到 document（IE8）或 window（IE9、 Opera、
Chrome 及 Safari）对象。
键盘与文本事件：
- keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
- keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下 Esc 键也会触发这个事件。Safari 3.1 之前的版本也会在用户按下非字符键时触发 keypress事件。
- keyup：当用户释放键盘上的键时触发。
- 在用户按了一下键盘上的字符键时，首先会触发 keydown 事件，然后紧跟着是 keypress 事件，最后会触发 keyup 事件。 其中， keydown 和 keypress 都是在文本框发生变化之前被触发的；而 keyup事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放，就会重复触发keydown 和 keypress 事件，直到用户松开该键为止。如果用户按下的是一个非字符键，那么首先会触发 keydown 事件，然后就是 keyup 事件。如果按住这个非字符键不放，那么就会一直重复触发 keydown 事件，直到用户松开这个键，此时会触发 keyup事件。
- textInput：文本事件。
- 复合事件：
- compositionstart：在 IME 的文本复合系统打开时触发，表示要开始输入了。
- compositionupdate：在向输入字段中插入新字符时触发。
- compositionend：在 IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。
- 变动事件：
- DOMNodeRemoved：使用removeChild()或replaceChild()从 DOM中删除节点时触发事件。
- DOMNodeInserted ：使用 appendChild()、 replaceChild()或 insertBefore()向 DOM 中插入节点时触发事件。
- HTML5 事件：
- contextmenu ：表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
- beforeunload：这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。
- DOMContentLoaded ：DOMContentLoaded 事件则在形成完整的 DOM 树之后就会触发，不理会图像、 JavaScript 文件、 CSS 文件或其他资源是否已经下载完毕。
- readystatechange 事件：提供与文档或元素的加载状态有关的信息。支持 readystatechange 事件的每个对象都有一个 readyState 属性，可能包含下列 5 个值中的一个：uninitialized（未初始化）：对象存在但尚未初始化、loading（正在加载）：对象正在加载数据、loaded（加载完毕）：对象加载数据完成、interactive（交互）：可以操作对象了，但还没有完全加载、complete（完成）：对象已经加载完毕。
- hashchange：在 URL 的参数列表（及 URL 中“ #”号后面的所有字符串）发生变化时通知开发人员。把 hashchange 事件处理程序添加给 window 对象，然后 URL 参数列表只要变化就会调用它。此时的 event 对象应该额外包含两个属性： oldURL 和 newURL。这两个属性分别保存着参数列表变化前后的完整 URL。
事件委托：
利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如， click 事件会一直冒泡到 document 层次。也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。
事件模拟：