What is the reason `addEventListener` does not work with a class method?

Question

What is the reason `addEventListener` does not work with a class method?

Recently, I discovered that the listener passed to addEventListener can actually be an object with a handleEvent function instead of just a callback function (here).

However, I encountered an issue when trying to use handleEvent as a class method:

class Foo {
    static handleEvent() {
        console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo);

This resulted in the error message:

Uncaught TypeError: Class constructor Foo cannot be invoked without 'new'

To bypass this, I could simply pass in Foo.handleEvent instead. But out of curiosity and for educational purposes, I'm wondering why static handleEvent doesn't work?

javascript typescript

Answer 1

Answer №1

A realization dawned on me!

Guess what? The addEventListener function has the ability to accept either a function or an object with a handleEvent method.

Here's the interesting part - Foo is indeed an object (Foo instanceof Object evaluates to true) but at the same time, it's a constructor, essentially a function.

When utilizing addEventListener, it sees Foo as some type of function and treats it like any other function by attempting to execute Foo().

However, this approach results in failure because Foo is actually a constructor function that requires the use of new for invocation. Unfortunately, addEventListener doesn't initially verify if Foo is also an object containing a handleEvent method.

Answer 2

A realization dawned on me!

Guess what? The addEventListener function has the ability to accept either a function or an object with a handleEvent method.

Here's the interesting part - Foo is indeed an object (Foo instanceof Object evaluates to true) but at the same time, it's a constructor, essentially a function.

When utilizing addEventListener, it sees Foo as some type of function and treats it like any other function by attempting to execute Foo().

However, this approach results in failure because Foo is actually a constructor function that requires the use of new for invocation. Unfortunately, addEventListener doesn't initially verify if Foo is also an object containing a handleEvent method.

Answer 3

Answer №2

Within the scope of Section 1.3.1 in the W3C Document Object Model Events specification, there is a reference to an "IDL interface" for the listener:

// In DOM Level 2:
interface EventListener {
  void               handleEvent(in Event evt);
};

In the Web IDL Standard specification, section 2.5.7 articulates:

It varies based on language bindings whether calling a static operation or accessing a static attribute through an instance of the interface is allowed

Based on this information, it seems that the language binding implementation, responsible for passing events to a Javascript listener, opted not to support calls to "static operations."

As an illustration, there exists an unresolved bug report requesting Mozilla's implementation to enable the invocation of static methods here, which is also discussed here

Answer 4

Within the scope of Section 1.3.1 in the W3C Document Object Model Events specification, there is a reference to an "IDL interface" for the listener:

// In DOM Level 2:
interface EventListener {
  void               handleEvent(in Event evt);
};

In the Web IDL Standard specification, section 2.5.7 articulates:

It varies based on language bindings whether calling a static operation or accessing a static attribute through an instance of the interface is allowed

Based on this information, it seems that the language binding implementation, responsible for passing events to a Javascript listener, opted not to support calls to "static operations."

As an illustration, there exists an unresolved bug report requesting Mozilla's implementation to enable the invocation of static methods here, which is also discussed here

Answer 5

Answer №3

To create an instance of the class, you must use the new keyword. Here is an example:

class Foo {
    static handleEvent() {
        console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, new Foo());

If you don't include the new keyword, a function that is meant to be used as a constructor will simply execute the function without creating a new instance.

The ecmascript interpreter requires the new keyword for proper instantiation of a class. This behavior is inherent to the language, and not specific to TypeScript or EventTarget/addEventListener.

When using addEventListener, if the function provided is recognized as a constructor (which Foo is), it will be invoked. However, since the interpreter sees it as a function and not specifically as a class, it won't call the static handleEvent method.

typeof Foo
'function'

Answer 6

To create an instance of the class, you must use the new keyword. Here is an example:

class Foo {
    static handleEvent() {
        console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, new Foo());

If you don't include the new keyword, a function that is meant to be used as a constructor will simply execute the function without creating a new instance.

The ecmascript interpreter requires the new keyword for proper instantiation of a class. This behavior is inherent to the language, and not specific to TypeScript or EventTarget/addEventListener.

When using addEventListener, if the function provided is recognized as a constructor (which Foo is), it will be invoked. However, since the interpreter sees it as a function and not specifically as a class, it won't call the static handleEvent method.

typeof Foo
'function'

Answer 7

Answer №4

Take a look at this playground, numerous "click" events are happening with or without using the abstract keyword before defining the class

If you prefer not to instantiate a new class using the new keyword (as indicated by your error), you can transform the targeted class into an abstract class which allows direct access without creating a new instance

abstract class Foo {
    static handleEvent() {
       return console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo.handleEvent);

Even though the method is static, it should still function properly by accessing the "handleEvent" method directly

class Foo {
    static handleEvent() {
       return console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo.handleEvent);

If you were to change the method from static to public, for instance, you would simply need to access prototype following Foo in the same manner

class Foo {
    public handleEvent() {
       return console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo.prototype.handleEvent);

Answer 8

Take a look at this playground, numerous "click" events are happening with or without using the abstract keyword before defining the class

If you prefer not to instantiate a new class using the new keyword (as indicated by your error), you can transform the targeted class into an abstract class which allows direct access without creating a new instance

abstract class Foo {
    static handleEvent() {
       return console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo.handleEvent);

Even though the method is static, it should still function properly by accessing the "handleEvent" method directly

class Foo {
    static handleEvent() {
       return console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo.handleEvent);

If you were to change the method from static to public, for instance, you would simply need to access prototype following Foo in the same manner

class Foo {
    public handleEvent() {
       return console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo.prototype.handleEvent);

What is the reason `addEventListener` does not work with a class method?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Grunt: Executing tasks exclusively for updated files - the ultimate guide!

The width of the Ion-slide is dynamically determined by the styling

What is the best way to access my backend API on a web hosting platform?

How can I make TypeScript mimic the ability of JavaScript object wrappers to determine whether a primitive value has a particular "property"?

Filtering an array of objects based on a specific condition in TypeScript

Setting up Jplayer as an audio player: A step-by-step guide

Is there a way to send the image object to the onclick function as it is being assigned?

What is the best way to determine the height of a DIV element set to "auto"?

What is the way to display the final list item when clicking in jQuery?

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Having trouble locating an element, Sammy?

Encounter an Unexpected Token Issue when using NextJS-auth0 in Jest

Is there a way for me to retrieve the widths of all child elements within an HTML document?

Discover specific element details using the id with Strapi and React

Prevent the event listener from continuously triggering

Tips for transforming a UTF16 document into a UTF8 format using node.js

Extracting JSON data within ajax's success callback

Encountered issues loading JavaScript and received a pyppeteer error while trying to access a website through requests

Guide on bringing in Typescript definition that exports a lone variable

Implement a timeout feature for npm clickhouse queries