OK, for those looking to work with mouse down events, here’s the things I had to learn/do:

1. Create the HTML element in the call to render with an id and phx-hook attributes,
2. Modify my app.js to work with the hook and specifically handle the element’s mouse down event
3. Add a new event handler in my LiveView component to receive the event.

Let’s look at each in turn…

1. Creating the HTML element

Somewhere in your render you need to have a HTML element you’d like to listen to events on. I’m using a button here. Your element needs to have a unique ID (this can be anything but is typically hyphen-separated such as "lovely-button") and also a phx-hook attribute which can also be anything but is typically CamelCase such as YoButton:

<button id="lovely-button" phx-hook="YoButton">yo button!</button>

2. Handling the JS event

Now we have our HTML element, we need to add the appropriate javascript event handler. This will be called when the button is clicked and will then tell the server via the pushEvent function.

First we need to edit our app.js to include a Hooks object which includes an internal YoButton object (this needs to be named similarly to the phx-hook attribute above).

LiveView gives us a mounted callback to use which is called when all the server and client initialisation is completed, so we know things are ready to go.

Inside this callback, we can add our event handler which listens for 'mousedown' events and then uses pushEvent to tell the server:

let Hooks = {}

Hooks.YoButton = {
  mounted(){
    this.el.addEventListener('mousedown', e => {
     this.pushEvent("mouseymouse");
    });
  }
}

We also need to teach our liveSocket about the Hooks:

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  params: {_csrf_token: csrfToken},
  ....

3. Receiving the event on the server

This is probably the easiest bit. In our LiveView component we just need a new handler function:

def handle_event("mouseymouse", _params, socket) do
   # do something interesting!
  {:noreply, socket}
end

I hope that this helps someone trying to do something similar

came here after reading this post by John Carmack https://twitter.com/ID_AA_Carmack/status/1787850053912064005

basically he advocates for mouse down making interfaces a lot snappier. I have tried it and it does really seem to work… Maybe it’s worth reviving this conversation?

LiveView is evolving similar to Java Server Faces. Java Server Faces is more component oriented specification of server side rendering of views. Oracle ADF Faces is JSF based framework which had extensive support for building rich client applications.

ADF Faces has 2 types of events server-side and client-side - client side events were meant to be handled on browser side and server side events which will be sent to server for handling on it on server side. Table - 6-1, 6-2, 6-3, 6-4 have different events generated by ADF Faces.

Leaving this here for reference and prior art.