# How do I pass javascript event handler function in UX properties

**URL:** <https://forums.fusetools.com/t/how-do-i-pass-javascript-event-handler-function-in-ux-properties/1381>\
**Category:** How-to Discussions\
**Created:** [July 10, 2016, 7:30am UTC](https://forums.fusetools.com/t/how-do-i-pass-javascript-event-handler-function-in-ux-properties/1381 "2016-07-10T07:30:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ckwong90](https://avatars.discourse-cdn.com/v4/letter/c/958977/32.png) [@ckwong90](https://forums.fusetools.com/u/ckwong90)\
**Post date:** [July 10, 2016, 7:30am UTC](https://forums.fusetools.com/t/how-do-i-pass-javascript-event-handler-function-in-ux-properties/1381/1 "2016-07-10T07:30:33Z")

</div>

For example

In Main.ux

```auto
<App>
    <JavaScript>
        function foo(){ / Does some things /};
        function bar(){ / Does some things /};
        function baz(){ / Does some things /};
        function zoo(){ / Does some things /};

        module.exports = {foo: foo, bar: bar, baz: baz, zoo: zoo}
    </Javascript>

    <FancyButton onClick="{foo}" title="FOO" />
    <FancyButton onClick="{bar}" title="BAR" />
    <FancyButton onClick="{baz}" title="BAZ" />
    <FancyButton onClick="{zoo}" title="BOO" />
</App>

```

in FancyButton.ux

```auto
<Panel ux:Class="FancyButton">
    <string ux:Property="onClick" />
    <string ux:Property="title" />
    <Button Clicked="{Property onClick}">
        <Text Value="{Property title}">
    </Button>
    //Some other fancy graphics and animations
</Panel>

```

Currently there are no compile errors, but the javascript functions are not getting called as I’m sure my code is wrong. Is this supported, if so how can I do this? Or is there a better way of doing this?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 10, 2016, 8:12am UTC](https://forums.fusetools.com/t/how-do-i-pass-javascript-event-handler-function-in-ux-properties/1381/2 "2016-07-10T08:12:12Z")

</div>

Hi!

Please see the UserEvent feature: [https://www.fusetools.com/docs/basics/creating-components#events-userevent](https://www.fusetools.com/docs/basics/creating-components#events-userevent)

---

<div class="post-metadata">

**Author:** ![ckwong90](https://avatars.discourse-cdn.com/v4/letter/c/958977/32.png) [@ckwong90](https://forums.fusetools.com/u/ckwong90)\
**Post date:** [July 10, 2016, 8:14pm UTC](https://forums.fusetools.com/t/how-do-i-pass-javascript-event-handler-function-in-ux-properties/1381/3 "2016-07-10T20:14:00Z")

</div>

Thanks Anders, userevents does exactly what I needed although I found the documentation incomplete for what I needed. I refered to the numberPad fuse sample from [NUMERPAD\_SAMPLE](https://github.com/fusetools/fuse-samples/tree/master/Samples/UserEvents) to figure out how to expose the userevent to a parent component handler.

Here is the revised code for what I wanted to do for anyone else trying to do the same thing.

In Main.ux

```auto
<App>
    <JavaScript>
        function foo(){ / Does some things /};
        function bar(){ / Does some things /};
        function baz(){ / Does some things /};
        function zoo(){ / Does some things /};

        module.exports = {foo: foo, bar: bar, baz: baz, zoo: zoo}
    </Javascript>

    <FancyButton onClick="{foo}" title="FOO" ><onClick Handler="{foo}" /></FancyButton>
    <FancyButton onClick="{bar}" title="BAR" /><onClick Handler="{bar}" /></FancyButton>
    <FancyButton onClick="{baz}" title="BAZ" /><onClick Handler="{baz}" /></FancyButton>
    <FancyButton onClick="{zoo}" title="ZOO" /><onClick Handler="{zoo}" /></FancyButton>
</App>

```

In FancyButton.ux

```auto
<Panel ux:Class="FancyButton">
    <string ux:Property="title" />
    <OnUserEvent ux:Class="onClick" EventName="onClick" />
    <UserEvent ux:Name="onClick" />

    <Button>
        <Clicked><RaiseUserEvent Name="onClick /></Clicked>
        <Text Value="{Property title}">
    </Button>
    //Some other fancy graphics and animations
</Panel

```