Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Test whether an object is a DOM event

From within a function like

function eventHandler(e) {
  // ...
}

is there a reliable and efficient way to determine whether e is a DOM event?

like image 420
Trevor Burnham Avatar asked Jan 18 '13 20:01

Trevor Burnham


People also ask

How do you check if an object is a DOM element?

To check if an element is connected or attached to the DOM or the document object ( or otherwise called the context ), you can use the isConnected property in the element's object in JavaScript. The isConnected element property returns boolean true if it connected to the DOM ( document object) and false if not.

How do you determine if JavaScript object is an event?

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.

How do you know if an element has an event?

To check if an element has event listener on it with JavaScript, we can call the getEventListeners function in the Chrome developer console. getEventListeners(document. querySelector("your-element-selector")); in the Chrome developer console to select the element we want to check with querySelector .

How do you know if an element is visible in DOM?

Check the parentNode Property If it is, then we know the element is in the visible DOM. We just pass the div. parentNode property straight into the Boolean function to return true if it's truthy and false otherwise. And so we should see that the console log is true if we have the same HTML as in the first example.


1 Answers

I don't believe there is a reliable way to determine if a given object is NOT a DOM event.

  1. typeof e will always return 'object' for genuine Event objects, which is not helpful.
  2. Any property that you might check for on the object can exist in both a genuine Event object or any non-Event object.
  3. You might think that the prototype chain could be of use in determining this, but it has the same problem as #2 (can easily be replicated).
  4. The contructor property might seem promising, but one could do this:
function DummyEvent(){
    this.constructor.toString = function(){
        return "function MouseEvent() { [native code] }";
    }
}

This ends up making console.log(e.constructor) print "function MouseEvent() { [native code] }"

So, is there a "reliable" way to tell if an object is an event? No.

Edit — Note that all of this is irrelevant if you want to prevent event spoofing as you can create real events easily.

var evt = new Event('click');
var evt2 = document.createEvent('MouseEvents');
evt2.initMouseEvent('click', ...);
//etc

Edit2 — I've created a test jsFiddle trying to find some way to distinguish objects, but I haven't found anything definite yet. Note that I didn't bother to specify properties on the DummyEvent because those can obviously easily be spoofed.

like image 119
Shmiddty Avatar answered Oct 12 '22 21:10

Shmiddty