JavaScript事件物件深入詳解
本文例項講述了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 物件包含著建立它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
在事件處理程式內部，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 物件也包含著建立它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
因為事件處理程式的作用域是根據它指定的方式來確定的，所以最好是使用 event.srcElement 來得到事件的目標比較靠譜：
<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](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() 的方法只能阻止事件冒泡。
為了學習工作與休閒娛樂互不衝突，現新建圈【碼農茶水鋪】用於程式設計師生活，愛好，交友，求職招聘，吐槽等話題交流，希望各位大神工作之餘到茶水鋪來喝茶聊天。群號:582735936