Event handling

Event handling is a directive that allows the component to respond to user action on the UI like button clicks, text inputs, drag elements and other actions. It uses a directive with namespace of on or on-prevent to bind a function to an element as an event listener.

Syntax

The syntax of event handling directive is on:<event_name>={<function>}.

Example.

import { component } from '@monster-js/core';

export function greeting() {

    const clickMe = () => {
        console.log('Hello World!');
    }

    return <button on:click={clickMe}>Greet</button>
}

component(greeting, 'app-greeting');

Function parameters

Since the directive value for event handling is a function, we can pass some arguments to the function by using a fat arrow function and pass the event handler to its body.

Example.

import { component } from '@monster-js/core';

export function greeting() {

    const clickMe = (name: string) => {
        console.log(`Hello ${name}!`);
    }

    return <button on:click={()=> clickMe('John')}>Greet</button>
}

component(greeting, 'app-greeting');

Event variable

We can also get the event variable that holds the data of the event like the following example.

Example.

import { component } from '@monster-js/core';

export function greeting() {

    const clickMe = (event) => {
        console.log(event);
    }

    return <button on:click={(event) => clickMe(event)}>Greet</button>
}

component(greeting, 'app-greeting')

or

import { component } from '@monster-js/core';

export function greeting() {

    const clickMe = (event) => {
        console.log(event);
    }

    return <button on:click={clickMe}>Greet</button>
}

component(greeting, 'app-greeting')

will have the same result.