The call expression invokes a method, using parameters specified within the attribute value. This method gets executed in response to an event. The event that instigates the call action is located to the left of the “.call” keyword, while specifics about what method to invoke are on its right.

As for which events can be invoked, there’s no specific constraint. Whenever a dispatch event is triggered, you have the flexibility to employ the “.call”. Behind the scenes, the call action handles the addEventListener method. This implies that, provided you can utilize addEventListener, you have the capability to link to that event via the “.call”.

• call a method on the binding context
• call a method on the binding context with parameters
• call a method on a element
• call a method on a element with parameters

<button click.call="methodName">...<button>
<button click.call="methodName(10, "greeting", $event)>...</button>
<button click.call="[query].methodName">...</button>
<button click.call="[query].methodName(10, "greeting", $event)>...</button>

From the given information, we have four illustrative examples.

In the first pair, methods are called upon the binding context. Conversely, the last two are tailored to invoke methods on a specific element. Within these examples, the term “query” is utilized, but it’s pivotal to understand that one should employ a valid query selector to pinpoint the desired element for method invocation. Square brackets act as containers for these queries. Notably, it’s possible to delineate multiple queries within these brackets, separated by commas, reminiscent of how CSS selectors are structured for styling purposes. The period (dot) following the closing square bracket is deliberate; it’s designed to evoke the sensation of invoking a method, mirroring the familiar syntax one encounters in JavaScript.