Handle JS events on a Hydro component tag

[kjeske]

Inside Hydro component view there should be a way to dispatch a JS event and then catch it on the parent component:

Child.cshtml:

<div>
  <input x-on:change="$hydro.dispatch('customchange', $el.target.value)">
</div>

Parent.cshtml:

<div>
  <hydro name="Child" hydro-on:customchange="@(() => Model.UpdateValue(Param.JS('$event.detail')))"/>
</div>

It would be useful when building complex components using JavaScript and wanting them to talk to a parent component, without using extra request to the server just to pass the event.

Another advantage is that when doing a handler on a hydro tag, we know the context of the event, when having the same component with the same handler rendered more than once, so:

<div>
  <hydro name="Child" key="1" hydro-on:customchange="@(() => Model.UpdateValue("1", Param.JS('$event.detail')))"/>
  <hydro name="Child" key="2" hydro-on:customchange="@(() => Model.UpdateValue("2", Param.JS('$event.detail')))"/>
</div>