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
- 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.
I propose a new binding
phx-on-*, with the syntax matching the existing
* is the event name you want to bind to. Examples:
<input type="text" phx-on-input="do_something">
For the params I propose the following rules:
- If the Event is a CustomEvent it will contain a
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
valuelike you already do for form events.
phx-value-*into params like is already done as well.