本文實例講述了JavaScript事件對象。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)致力于網(wǎng)站建設(shè),網(wǎng)站制作設(shè)計,營銷網(wǎng)頁按需定制網(wǎng)站,外貿(mào)網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),微信小程序定制開發(fā),網(wǎng)站SEO優(yōu)化,網(wǎng)站設(shè)計制作案例豐富,是成都做網(wǎng)站公司和建站公司,歡迎咨詢。

觸發(fā) DOM 上的事件時，會生成一個事件對象 event，它包含著所有與事件有關(guān)的信息，諸如導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。所有的瀏覽器都支持 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 對象：

event 對象包含著創(chuàng)建它的特定事件相關(guān)的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：

在事件處理程序內(nèi)部，this 始終等于 currentTarget，而 target 等于事件的實際目標(biāo)。如果直接將事件處理程序指定給目標(biāo)元素，那么這三個值相等：

如果事件處理程序指定到按鈕的父節(jié)點上，那么它們是不同的：

如果需要通過一個函數(shù)來處理多個事件，那么可以使用 type 屬性：

使用 preventDefault() 方法來阻止特定事件的默認(rèn)行為：

點我

注意：只有 cancelable 屬性值為 true 的事件，才可以使用 preventDefault() 阻止特定事件的默認(rèn)行為！

stopPropagation() 會立即阻止事件在 DOM 層次的傳播。比如這里在按鈕事件中調(diào)用 stopPropagation() ，來避免觸發(fā)注冊在 document.body 上的事件處理程序：

eventPhase 屬性，可以確定事件當(dāng)前正處于事件流的哪一個階段：

注意： 只有在事件處理程序執(zhí)行期間，event 對象才會存在；一旦事件處理程序執(zhí)行結(jié)束，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)建它的特定事件相關(guān)的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：

因為事件處理程序的作用域是根據(jù)它指定的方式來確定的，所以最好是使用 event.srcElement 來得到事件的目標(biāo)比較靠譜：

點我

將 returnValue 設(shè)置為 false，就能阻止默認(rèn)行為：

點我

與 DOM 不同的是，這里沒有辦法確定事件是否能被取消。

因為 IE 不支持事件捕獲，所以只能取消事件冒泡：

3 跨瀏覽器的事件對象

我們把之前的 EventUtil 對象進(jìn)行增強：

var EventUtil = {
 ...
 /**
 * 返回對 event 對象的引用
 * @param event
 * @returns {*}
 */
 getEvent: function (event) {
 return event ? event : window.event;
 },
 /**
 * 返回事件的目標(biāo)
 * @param event
 * @returns {*|elem|Object}
 */
 getTarget: function (event) {
 return event.target || event.srcElement;
 },
 /**
 * 取消事件默認(rèn)行為
 * @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;
 }
 }
}

這樣使用：

點我

取消事件默認(rèn)行為： 

點我

阻止事件傳播：

點我

因為 IE 不支持事件捕獲，所以 EventUtil 的 stopPropagation() 的方法只能阻止事件冒泡。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。