本文實例講述了JavaScript常見事件對象與操作。分享給大家供大家參考，具體如下：
觸發 DOM 上的事件時，會生成一個事件對象 event，它包含著所有與事件有關的信息，諸如導致事件的元素、事件的類型以及其他與特定事件相關的信息。所有的瀏覽器都支持 event 對象，但支持的方式不同。
1 DOM 中的事件對象
兼容 DOM 的瀏覽器會將 event 對象傳入事件處理程序（DOM0 級與 DOM2 級都支持）：
var btn = document.getElementById("myBtn");btn.onclick = function (event) { console.log(event.type);//"click"};btn.addEventListener("click",function(event){ console.log(event.type);//"click",false}; event.type 保存的是被觸發的事件類型。
通過 HTML 屬性指定事件處理程序時， event 中保存的是 event 對象：
<input type="button" value="Click Me" onclick="alert(event.type)"/>
event 對象包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| bubbles | Boolean | 只讀 | 事件是否冒泡。 |
| cancelable | Boolean | 只讀 | 是否可以取消事件的默認行為。 |
| currentTarget | Element | 只讀 | 與當前事件處理程序相關的元素。 |
| defaultPrevented | Boolean | 只讀 | true 表示已調用 preventDefault() 方法（DOM3 新增）。 |
| detail | Integer | 只讀 | 與事件相關的細節信息。 |
| eventPhase | Integer | 只讀 | 調用事件處理程序的階段；1：捕獲；2：處于目標；3：冒泡。 |
| preventDefault() | Function | 只讀 | 取消事件的默認行為（如果 cancelable 為 true，就可以調用這個方法）。 |
| stopImmediatePropagation() | Function | 只讀 | 阻止事件被進一步捕獲或者冒泡，同時阻止任何事件處理程序被調用（DOM3 新增）。 |
| stopPropagation() | Function | 只讀 | 阻止事件被進一步捕獲或者冒泡（如果 bubbles 為 true，就可以調用這個方法）。 |
| target | Element | 只讀 | 事件的目標。 |
| trusted | Boolean | 只讀 | true：事件是由瀏覽器生成的；false：事件是通過 JavaScript 創建的（DOM3 新增）。 |
| type | String | 只讀 | 被觸發的事件類型。 |
| view | AbstractView | 只讀 | 與事件相關的抽象視圖，相當于發生事件的 window 對象。 |
在事件處理程序內部，this 始終等于 currentTarget，而 target 等于事件的實際目標。如果直接將事件處理程序指定給目標元素，那么這三個值相等：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.log(event.currentTarget === this);//true console.log(event.target === this);//true }</script>如果事件處理程序指定到按鈕的父節點上，那么它們是不同的：
<script type="text/javascript"> document.body.onclick = function (event) { console.log(event.currentTarget === document.body);//true console.log(this === document.body);//true console.log(event.target === document.getElementById("myBtn"));//true }</script>如果需要通過一個函數來處理多個事件，那么可以使用 type 屬性：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function (event) { switch (event.type) { case "click": console.log("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;</script> 使用 preventDefault() 方法來阻止特定事件的默認行為：
<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點我</a><script type="text/javascript"> var link = document.getElementById("myLink"); link.onclick = function (event) { event.preventDefault(); }</script> 注意：只有 cancelable 屬性值為 true 的事件，才可以使用 preventDefault() 阻止特定事件的默認行為！
stopPropagation() 會立即阻止事件在 DOM 層次的傳播。比如這里在按鈕事件中調用 stopPropagation() ，來避免觸發注冊在 document.body 上的事件處理程序：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.log("Clicked"); event.stopPropagation(); }; document.body.onclick = function (event) { console.log("Body clicked"); };</script>eventPhase 屬性，可以確定事件當前正處于事件流的哪一個階段：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.log(event.eventPhase);//2 }; document.body.addEventListener("click", function (event) { console.log(event.eventPhase);//1 }, true);//true 表示捕獲階段 document.body.onclick = function (event) { console.log(event.eventPhase);//3 };</script>注意： 只有在事件處理程序執行期間，event 對象才會存在；一旦事件處理程序執行結束，event 對象就會被銷毀！
2 IE 中的事件對象
在使用 DOM0 級方法添加事件處理程序時，event 對象是作為 window 對象的一個屬性存在：
var btn = document.getElementById("myBtn");btn.onclick = function () { var event = window.event; console.log(event.type);//"click"};如果是通過 HTML 屬性指定的事件處理程序，也跟 DOM一樣，可以通過 event 變量來訪問 event 對象。
IE 的 event 對象也包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
| 屬性 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| cancelBubble | Boolean | 讀/寫 | 默認值為 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。 |
| returnValue | Boolean | 讀/寫 | 默認值為 true，false 表示取消事件默認行為（同 DOM 的 preventDefault() ）。 |
| srcElement | Element | 只讀 | 事件的目標（同 DOM 中的 target）。 |
| type | String | 只讀 | 被觸發的事件類型。 |
因為事件處理程序的作用域是根據它指定的方式來確定的，所以最好是使用 event.srcElement 來得到事件的目標比較靠譜：
<button id="myBtn">點我</button><script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { console.log(window.event.srcElement === this);//true }; btn.attachEvent("onclick", function (event) { console.log(event.srcElement === this);//false });</script>將 returnValue 設置為 false，就能阻止默認行為：
<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點我</a><script type="text/javascript"> var link = document.getElementById("myLink"); link.onclick = function () { window.event.returnValue = false; }</script>與 DOM 不同的是，這里沒有辦法確定事件是否能被取消。
因為 IE 不支持事件捕獲，所以只能取消事件冒泡：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { console.log("Clicked"); window.event.cancelBubble = true; }; document.body.onclick = function (event) { console.log("Body clicked"); };</script>3 跨瀏覽器的事件對象
我們把之前的 EventUtil 對象進行增強：
var EventUtil = { ... /** * 返回對 event 對象的引用 * @param event * @returns {*} */ getEvent: function (event) { return event ? event : window.event; }, /** * 返回事件的目標 * @param event * @returns {*|elem|Object} */ getTarget: function (event) { return event.target || event.srcElement; }, /** * 取消事件默認行為 * @param event */ preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, /** * 阻止事件流 * @param event */ stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }}這樣使用：
<button id="myBtn">點我</button><script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { event = EventUtil.getEvent(event);//確保所有瀏覽器都能使用 event 對象 var target = EventUtil.getTarget(event); console.log(target); }</script>取消事件默認行為：
<a id="myLink" href="http://www.163.com" rel="external nofollow" >點我</a><script type="text/javascript"> var link = document.getElementById("myLink"); link.onclick = function (event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); }</script>阻止事件傳播：
<button id="myBtn">點我</button><script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.log("Clicked"); event = EventUtil.getEvent(event); EventUtil.stopPropagation(event); }; document.body.onclick = function (event) { console.log("Body clicked"); };</script> 因為 IE 不支持事件捕獲，所以 EventUtil 的 stopPropagation() 的方法只能阻止事件冒泡。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
