深度解析JavaScript事件對象

這篇文章主要介紹了JavaScript事件對象,結合實例形式深刻分析了javascript DOM、IE及其餘瀏覽器相關事件對象操做技巧與注意事項,寫的十分的全面細緻，具備必定的參考價值，對此有須要的朋友能夠參考學習下。若有不足之處，歡迎批評指正。

觸發 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
};//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920

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
 }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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
 }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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>//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920

使用 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();
 }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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");
 };//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</script>

eventPhase 屬性，能夠肯定事件當前正處於事件流的哪個階段：

<script type="text/javascript">
 var btn = document.getElementById("myBtn");
 btn.onclick = function (event) {
 console.log(event.eventPhase);//2
 };//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
 document.body.addEventListener("click", function (event) {
 console.log(event.eventPhase);//1
 }, true);//true 表示捕獲階段
 document.body.onclick = function (event) {
 console.log

注意： 只有在事件處理程序執行期間，event 對象纔會存在；一旦事件處理程序執行結束，event 對象就會被銷燬！ 2 IE 中的事件對象

在使用 DOM0 級方法添加事件處理程序時，event 對象是做爲 window 對象的一個屬性存在：

var btn = document.getElementById("myBtn");
btn.onclick = function () {
 var event = window.event;
 console.log(event.type);//"click"
};//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920

若是是經過 HTML 屬性指定的事件處理程序，也跟 DOM同樣，能夠經過 event 變量來訪問 event 對象。 IE 的 event 對象也包含着建立它的特定事件相關的屬性和方法，因此可能每一個特定事件都有本身所特有的屬性和方法，不過全部事件都會有這些屬性和方法：

由於事件處理程序的做用域是根據它指定的方式來肯定的，因此最好是使用 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
 });//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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");
 };//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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;
 }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
 }

這樣使用：

<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);
 }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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);
 }//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</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");
 };//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
</script>

結語

感謝您的觀看，若有不足之處，歡迎批評指正。