How to determine if JavaScript object is an event?

Let us first understand what is JavaScript objects and JavaScript events. An object in JavaScript is a distinct entity having properties and a type. For an instance, contrast it with a bowl. A bowl is an object with some properties. The properties are design, color, material, weight, etc. Like this, JavaScript object also has some properties.

An independent entity known as a JavaScript object can store numerous values as its properties and methods.

While a method represents a function, an object property maintains a literal value. Either the object literal or the object function object() { [native code] } syntax can be used to create an object. There are 6 different kinds of objects. These are object, array, number, date, function, and string.

JavaScript code that responds to certain circumstances can be written using events. A few instances of events are, user clicking the mouse, loading of the website, onclick, onload, on change etc. are some of the examples of JavaScript events.

Now we can learn how to determine whether the JavaScript object is an event or not.

Using target Property

In this section, we will see, how to determine whether a JavaScript object is an event with the help of the target property of the event.

Syntax

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

      //this JavaScript object is an event
   }
}

In the above syntax, we are passing the object as a function argument to check if it is an event or not.

Algorithm

  • STEP 1 − Attach click event to a button

  • STEP 2 − Pass a string as an object to the type identifying function

  • STEP 3 − Using the target property, display the appropriate output in both cases.

Example

In this example, we have created empty Dom to display the output. A button is created for checking the event target on click event. First, the click action is attached to the button using an event handler. Next, a string is passed as an object. When click action occurs, we get the output “passed object is an event”. When the case of string gets executed, we get the output “passed object is not an event”.

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

Using the instanceof Property

In this section, we will see, how to determine whether a JavaScript object is an event with the help of instanceof property of the event.

Syntax

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

Here, we are creating the event object using the new Event() constructor and checking if it is an event or not using instanceof operator.

Example

In this example, we have created empty Dom for output display. Using the new Event() method, the click event is passed as an object. Here, with the instanceof property, we identify that this object is an event. The next case passes a string value which comes up with an output that this object is not an event.

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

In this tutorial, we learned to determine whether a JavaScript object is an event or not. The first property is used as the event's target. This is a simple approach that works by listening to event listeners.

The second method is instanceof property in case when a new Event() is used.

Both the methods are easy to follow and identify whether the object is an event or not.

Updated on: 23-Aug-2022

1K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements