JavaScript事件對(duì)象深入詳解

更新時(shí)間：2018年12月30日 12:19:33 作者：deniro_li

這篇文章主要介紹了JavaScript事件對(duì)象,結(jié)合實(shí)例形式深入分析了javascript DOM、IE及其他瀏覽器相關(guān)事件對(duì)象操作技巧與注意事項(xiàng),需要的朋友可以參考下

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

觸發(fā) DOM 上的事件時(shí)，會(huì)生成一個(gè)事件對(duì)象 event，它包含著所有與事件有關(guān)的信息，諸如導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。所有的瀏覽器都支持 event 對(duì)象，但支持的方式不同。

1 DOM 中的事件對(duì)象

兼容 DOM 的瀏覽器會(huì)將 event 對(duì)象傳入事件處理程序（DOM0 級(jí)與 DOM2 級(jí)都支持）：

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ā)的事件類型。

通過(guò) HTML 屬性指定事件處理程序時(shí)， event 中保存的是 event 對(duì)象：

<input type="button" value="Click Me" onclick="alert(event.type)"/>

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

屬性/方法	類型	讀/寫(xiě)	說(shuō)明
bubbles	Boolean	只讀	事件是否冒泡。
cancelable	Boolean	只讀	是否可以取消事件的默認(rèn)行為。
currentTarget	Element	只讀	與當(dāng)前事件處理程序相關(guān)的元素。
defaultPrevented	Boolean	只讀	true 表示已調(diào)用 preventDefault() 方法（DOM3 新增）。
detail	Integer	只讀	與事件相關(guān)的細(xì)節(jié)信息。
eventPhase	Integer	只讀	調(diào)用事件處理程序的階段；1：捕獲；2：處于目標(biāo)；3：冒泡。
preventDefault()	Function	只讀	取消事件的默認(rèn)行為（如果 cancelable 為 true，就可以調(diào)用這個(gè)方法）。
stopImmediatePropagation()	Function	只讀	阻止事件被進(jìn)一步捕獲或者冒泡，同時(shí)阻止任何事件處理程序被調(diào)用（DOM3 新增）。
stopPropagation()	Function	只讀	阻止事件被進(jìn)一步捕獲或者冒泡（如果 bubbles 為 true，就可以調(diào)用這個(gè)方法）。
target	Element	只讀	事件的目標(biāo)。
trusted	Boolean	只讀	true：事件是由瀏覽器生成的；false：事件是通過(guò) JavaScript 創(chuàng)建的（DOM3 新增）。
type	String	只讀	被觸發(fā)的事件類型。
view	AbstractView	只讀	與事件相關(guān)的抽象視圖，相當(dāng)于發(fā)生事件的 window 對(duì)象。

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

<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é)點(diǎn)上，那么它們是不同的：

<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>

如果需要通過(guò)一個(gè)函數(shù)來(lái)處理多個(gè)事件，那么可以使用 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() 方法來(lái)阻止特定事件的默認(rèn)行為：

<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點(diǎn)我</a>
<script type="text/javascript">
 var link = document.getElementById("myLink");
 link.onclick = function (event) {
 event.preventDefault();
 }
</script>

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

stopPropagation() 會(huì)立即阻止事件在 DOM 層次的傳播。比如這里在按鈕事件中調(diào)用 stopPropagation() ，來(lái)避免觸發(fā)注冊(cè)在 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 屬性，可以確定事件當(dāng)前正處于事件流的哪一個(gè)階段：

<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 對(duì)象才會(huì)存在；一旦事件處理程序執(zhí)行結(jié)束，event 對(duì)象就會(huì)被銷毀！

2 IE 中的事件對(duì)象

在使用 DOM0 級(jí)方法添加事件處理程序時(shí)，event 對(duì)象是作為 window 對(duì)象的一個(gè)屬性存在：

var btn = document.getElementById("myBtn");
btn.onclick = function () {
 var event = window.event;
 console.log(event.type);//"click"
};

如果是通過(guò) HTML 屬性指定的事件處理程序，也跟 DOM一樣，可以通過(guò) event 變量來(lái)訪問(wèn) event 對(duì)象。

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

屬性	類型	讀/寫(xiě)	說(shuō)明
cancelBubble	Boolean	讀/寫(xiě)	默認(rèn)值為 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。
returnValue	Boolean	讀/寫(xiě)	默認(rèn)值為 true，false 表示取消事件默認(rèn)行為（同 DOM 的 preventDefault() ）。
srcElement	Element	只讀	事件的目標(biāo)（同 DOM 中的 target）。
type	String	只讀	被觸發(fā)的事件類型。

因?yàn)槭录幚沓绦虻淖饔糜蚴歉鶕?jù)它指定的方式來(lái)確定的，所以最好是使用 event.srcElement 來(lái)得到事件的目標(biāo)比較靠譜：

<button id="myBtn">點(diǎn)我</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 設(shè)置為 false，就能阻止默認(rèn)行為：

<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點(diǎn)我</a>
<script type="text/javascript">
 var link = document.getElementById("myLink");
 link.onclick = function () {
 window.event.returnValue = false;
 }
</script>

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

因?yàn)?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 跨瀏覽器的事件對(duì)象

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

var EventUtil = {
 ...
 /**
 * 返回對(duì) event 對(duì)象的引用
 * @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;
 }
 }
}

這樣使用：

<button id="myBtn">點(diǎn)我</button>
<script type="text/javascript">
 var btn = document.getElementById("myBtn");
 btn.onclick = function (event) {
 event = EventUtil.getEvent(event);//確保所有瀏覽器都能使用 event 對(duì)象
 var target = EventUtil.getTarget(event);
 console.log(target);
 }
</script>

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

<a id="myLink"  rel="external nofollow" >點(diǎn)我</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">點(diǎn)我</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>

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

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

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

您可能感興趣的文章: