# Should binding to (custom) DOM event, with hyphen in the name work?

**URL:** <https://discourse.aurelia.io/t/should-binding-to-custom-dom-event-with-hyphen-in-the-name-work/3876>\
**Category:** Help Requests\
**Created:** [November 6, 2020, 4:21pm UTC](https://discourse.aurelia.io/t/should-binding-to-custom-dom-event-with-hyphen-in-the-name-work/3876 "2020-11-06T16:21:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dtaalbers](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dtaalbers/32/1412_2.png) [@dtaalbers](https://discourse.aurelia.io/u/dtaalbers)\
**Post date:** [November 6, 2020, 4:21pm UTC](https://discourse.aurelia.io/t/should-binding-to-custom-dom-event-with-hyphen-in-the-name-work/3876/1 "2020-11-06T16:21:59Z")

</div>

Hi there.

I’ve build a custom StencilJS component that fires a custom DOM event (see below). FYI: The ‘on’ part is added bij StencilJS itself.

```auto
@Event() searchEvent: EventEmitter<string>;

```

But when I want to bind to that event it doesn’t work. See my HTML and viewmodel.

```auto
// Html
<my-component ref="myComponent" search-event.trigger="handleSearch($event)">

// View model
export class App {

	private myComponent: StencilJS.MyComponent;

	private attached(): void {
		// This works. So I know that the event is triggered properly.
		this.myComponent.addEventListener('searchEvent', (ev: CustomEvent<string>) => this.handleSearch(ev));
	}

	private handleSearch(event: CustomEvent<string>): void {
	 	// The event handler. This is not triggered via the 'search-event.trigger' binding.
	}	
}

```

But when I change the event name on my StencilJS component to the following

```auto
@Event() searchevent: EventEmitter<string>;

```

and my html to

```auto
<my-component ref="myComponent" searchevent.trigger="handleSearch($event)">

```

the binding works fine! Is there something I am missing? Can’t aurelia handle the hyphen in the DOM event name when binding?

Any help is appreciated.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 8, 2020, 12:15pm UTC](https://discourse.aurelia.io/t/should-binding-to-custom-dom-event-with-hyphen-in-the-name-work/3876/2 "2020-11-08T12:15:44Z")

</div>

Aurelia takes event names in the template as is, though there’ a way or two to tell a binding to use camel cased version of the event name:

- use a binding behavior to alter the event name in binding [https://gist.dumber.app/?gist=1a5d8950c0257cd37ffc213fd099f904](https://gist.dumber.app/?gist=1a5d8950c0257cd37ffc213fd099f904) The pro of this approach is you control it per binding
- to always turn event name into camel case, we can override syntax interpreter `.trigger` syntax like this example [https://gist.dumber.app/?gist=87f64cd54f4404a8e62f00982dc738d4](https://gist.dumber.app/?gist=87f64cd54f4404a8e62f00982dc738d4)

We will have proper doc around this in v2, as it seems to be a common requirements. Thanks for asking about this.

---

<div class="post-metadata">

**Author:** ![genadis](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/genadis/32/897_2.png) [@genadis](https://discourse.aurelia.io/u/genadis)\
**Post date:** [November 10, 2022, 5:17pm UTC](https://discourse.aurelia.io/t/should-binding-to-custom-dom-event-with-hyphen-in-the-name-work/3876/3 "2022-11-10T17:17:28Z")

</div>

> [@bigopon](#):
>
> to always turn event name into camel case, we can override syntax interpreter `.trigger` syntax like this example [Dumber Gist](https://gist.dumber.app/?gist=87f64cd54f4404a8e62f00982dc738d4)

Thank you for the suggestion, it seems the gist is out of date, I tried the approach but without success.  
There is error in the gist.  
In addition tried it runs in my app but the trigger function is never called:

```auto
aurelia.use.postTask(() => {
            const bindingLanguage = aurelia.container.get(BindingLanguage) as any;
            const originalTriggerSyntax = bindingLanguage.trigger;
            bindingLanguage.trigger = function () {
                const expression = originalTriggerSyntax.apply(this, arguments);
                expression.originalTargetEvent = expression.targetEvent;
                expression.targetEvent = camelCase(expression.targetEvent);
                return expression;
            };
        });

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 4, 2023, 3:55am UTC](https://discourse.aurelia.io/t/should-binding-to-custom-dom-event-with-hyphen-in-the-name-work/3876/4 "2023-07-04T03:55:44Z")

</div>

It needs to be applied on the syntax interpreter instead of binding language:

```diff
- const originalTriggerSyntax = bindingLanguage.trigger;
+ const originalTriggerSyntax = bindingLanguage.syntaxInterpreter.trigger;
...
- bindingLanguage.trigger = function() {
+ bindingLanguage.syntaxInterpreter.trigger = function() {

```