JavaScript事件對象深入詳解
更新時間：2018年12月30日 12:19:33 作者：deniro_li
這篇文章主要介紹了JavaScript事件對象,結合實例形式深入分析了javascript DOM、IE及其他瀏覽器相關事件對象操作技巧與注意事項,需要的朋友可以參考下
本文實例講述了JavaScript事件對象。分享給大家供大家參考，具體如下：
觸發(fā) 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 保存的是被觸發(fā)的事件類型。
通過 HTML 屬性指定事件處理程序時， event 中保存的是 event 對象：
<input type="button" value="Click Me" onclick="alert(event.type)"/>
event 對象包含著創(chuàng)建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| bubbles | Boolean | 只讀 | 事件是否冒泡。 |
| cancelable | Boolean | 只讀 | 是否可以取消事件的默認行為。 |
| currentTarget | Element | 只讀 | 與當前事件處理程序相關的元素。 |
| defaultPrevented | Boolean | 只讀 | true 表示已調(diào)用 preventDefault() 方法（DOM3 新增）。 |
| detail | Integer | 只讀 | 與事件相關的細節(jié)信息。 |
| eventPhase | Integer | 只讀 | 調(diào)用事件處理程序的階段；1：捕獲；2：處于目標；3：冒泡。 |
| preventDefault() | Function | 只讀 | 取消事件的默認行為（如果 cancelable 為 true，就可以調(diào)用這個方法）。 |
| stopImmediatePropagation() | Function | 只讀 | 阻止事件被進一步捕獲或者冒泡，同時阻止任何事件處理程序被調(diào)用（DOM3 新增）。 |
| stopPropagation() | Function | 只讀 | 阻止事件被進一步捕獲或者冒泡（如果 bubbles 為 true，就可以調(diào)用這個方法）。 |
| target | Element | 只讀 | 事件的目標。 |
| trusted | Boolean | 只讀 | true：事件是由瀏覽器生成的；false：事件是通過 JavaScript 創(chuàng)建的（DOM3 新增）。 |
| type | String | 只讀 | 被觸發(fā)的事件類型。 |
| view | AbstractView | 只讀 | 與事件相關的抽象視圖，相當于發(fā)生事件的 window 對象。 |
在事件處理程序內(nèi)部，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>
如果事件處理程序指定到按鈕的父節(jié)點上，那么它們是不同的：
<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>
如果需要通過一個函數(shù)來處理多個事件，那么可以使用 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 層次的傳播。比如這里在按鈕事件中調(diào)用 stopPropagation() ，來避免觸發(fā)注冊在 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>
注意： 只有在事件處理程序執(zhí)行期間，event 對象才會存在；一旦事件處理程序執(zhí)行結束，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 對象也包含著創(chuàng)建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
| 屬性 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| cancelBubble | Boolean | 讀/寫 | 默認值為 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。 |
| returnValue | Boolean | 讀/寫 | 默認值為 true，false 表示取消事件默認行為（同 DOM 的 preventDefault() ）。 |
| srcElement | Element | 只讀 | 事件的目標（同 DOM 中的 target）。 |
| type | String | 只讀 | 被觸發(fā)的事件類型。 |
因為事件處理程序的作用域是根據(jù)它指定的方式來確定的，所以最好是使用 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" 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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
下面小編就為大家?guī)硪黄鷍s封裝添加class,刪除class的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
下面小編就為大家?guī)硪黄獪\談JavaScript 覆蓋原型以及更改原型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨過來看看吧2016-08-08
這篇文章主要介紹了JavaScript使用yield模擬多線程的方法,實例分析了javascript多線程的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS截取字符串的方法,結合實例形式較為詳細的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
做音樂播放器小程序時,因為swiper的問題耽誤不少時間,所以下面這篇文章主要給大家介紹了關于uni-app使用swiper實現(xiàn)輪播圖的相關資料,需要的朋友可以參考下2022-11-11
javascript貪吃蛇 作者sunxing007 注釋完整，面向?qū)ο?2009-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)經(jīng)典貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細介紹了原生js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了js過濾HTML標簽實現(xiàn)方法,以完整實例形式分析了JavaScript使用正則表達式過濾HTML標簽的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
我們在做小程序支付相關的開發(fā)時,總會遇到這些難題,下面這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)云支付那些事兒,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2021-09-09