I’d like to propose a new Binding API, phx-on-*
. This would allow you to bind to any arbitrary event on an element. There are two use-cases that come to mind immediately:
- There are a lot of DOM events and the number keeps growing, but Phoenix does not support them all. It should not need to support them all! An example of one I miss is a form element’s
input
event. - Custom elements pair great with Phoenix, but custom elements often have their own custom events. There’s currently no way to bind to custom events outside of using a hook.
Proposal
I propose a new binding phx-on-*
, with the syntax matching the existing phx-value-*
. The *
is the event name you want to bind to. Examples:
Form Elements
<input type="text" phx-on-input="do_something">
Custom Elements
<my-dialog phx-on-open="handle_open"></my-dialog>
Event params
For the params I propose the following rules:
- If the Event is a CustomEvent it will contain a
details
property.event.details
. For CustomEvents that come from places like Custom Elements this is what should be passed to params. - If the Event is a Form element, collect the
value
like you already do for form events. - Collect
phx-value-*
into params like is already done as well.