如何判斷JavaScript物件是否為事件？

讓我們首先了解什麼是JavaScript物件和JavaScript事件。JavaScript物件是一個具有屬性和型別的獨立實體。例如，把它與碗進行對比。碗是一個具有某些屬性的物件。這些屬性包括設計、顏色、材質、重量等。同樣，JavaScript物件也有一些屬性。

一個稱為JavaScript物件的獨立實體可以儲存許多值作為其屬性和方法。

方法表示函式，而物件屬性保持字面值。可以使用物件字面量或物件函式object() { [native code] }語法建立物件。共有6種不同型別的物件。它們是物件、陣列、數字、日期、函式和字串。

可以使用事件編寫響應某些情況的JavaScript程式碼。一些事件的例子包括：使用者點選滑鼠、網站載入、onclick、onload、onchange等等都是JavaScript事件的一些例子。

現在我們可以學習如何確定JavaScript物件是否為事件。

使用target屬性

在本節中，我們將看到如何使用事件的target屬性來確定JavaScript物件是否為事件。

語法

function someAction(obj) {
   if (obj.target) {

      //this JavaScript object is an event
   }
}

在上面的語法中，我們將物件作為函式引數傳遞，以檢查它是否為事件。

演算法

  • 步驟1 - 將點選事件附加到按鈕

  • 步驟2 - 將字串作為物件傳遞給型別識別函式

  • 步驟3 - 使用target屬性，在兩種情況下顯示相應的輸出。

示例

在這個例子中，我們建立了空的DOM來顯示輸出。建立了一個按鈕，用於在點選事件上檢查事件目標。首先，使用事件處理程式將點選操作附加到按鈕。接下來，將字串作為物件傳遞。當點選操作發生時，我們得到輸出“傳遞的物件是一個事件”。當字串的情況執行時，我們得到輸出“傳遞的物件不是一個事件”。

<html>
<body>
   <h2> Using the <i> target </i> Property </h2>
   <p id="idStrDom">   </p>
   <button id="idButton"> Click Me </button>
   <p id="idNullDom">   </p>
   <script>
      document.getElementById("idButton").addEventListener("click", doAction);
      doAction("not event", true);
      function doAction(obj, isStr) {
         var isEvent = false;
         if (obj.target)
            isEvent = true;
         var NullDom;
         if (isStr) {
            NullDom = document.getElementById("idStrDom");
         } else {
            NullDom = document.getElementById("idNullDom");
         }
         NullDom.innerHTML = "the passed object OBJ is " + (isEvent ? "an event": "not an event");
      }
   </script>
</body>
</html>

使用instanceof屬性

在本節中，我們將看到如何使用事件的instanceof屬性來確定JavaScript物件是否為事件。

語法

var obj = new Event('click');
obj instanceof Event; // true means this object is an event

在這裡，我們使用new Event()建構函式建立事件物件，並使用instanceof運算子檢查它是否為事件。

示例

在這個例子中，我們建立了空的DOM用於顯示輸出。使用new Event()方法，點選事件作為物件傳遞。在這裡，使用instanceof屬性，我們確定此物件是一個事件。下一個案例傳遞一個字串值，其輸出結果是此物件不是一個事件。

<html>
<body>
   <h2> Using the <i> instanceof </i> property </h2>
   <p id="idNullDom">   </p>
   <p id="idStrDom">   </p>
   <script>
      doAction("event");
      doAction("not event");
      function doAction(type) {
         var obj;
         if (type == "event") obj = new Event('click');
         else obj = "hello";
         var isEvent = obj instanceof Event; // true means this object is an event
         var varNullDom;
         if (type == "event") {
            varNullDom = document.getElementById("idNullDom");
         } else {
            varNullDom = document.getElementById("idStrDom");
         }
         varNullDom.innerHTML = "the passed object OBJ is " + (isEvent ? "an event" : "not an event");
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何確定JavaScript物件是否為事件。第一個屬性用作事件的目標。這是一種簡單的方法，透過偵聽事件監聽器來工作。

第二種方法是在使用new Event()時使用instanceof屬性。

這兩種方法都易於理解，並且可以識別物件是否為事件。

更新於：2022年8月23日

1K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告