how to implement a local event in XOJO Web?

Hi, A common weakness of server-side event (edited in event handlers of webcontrols) is its response performance. A relavent conversation was posted in https://forum.xojo.com/8490-web-edition-basic-client-side-operations , which shows the defect of server-side operations.
In my project, I want to implement a mousedown effect that when mousedown, the image becomes dim. Meanwhile, if the mouse is out of the image (keeping mousedown), the image will regain bright and if the mouse enters the image again, the image becomes dim again.
Firstly , I used the event handlers (Mousedown, Mouseenter, MouseUp, Mouseexit) to implement the effect, only to find that the response performance was awful. Time lag existed and sometimes it gave wrong response.
Therefore, I’d like to ask how to implement a local event in XOJO Web that can performance as well as Js.

As far as I know, I can use executeJavaScript function to add JS or Jquery scripts to implement a local event. But we know that abuse of JS is against the idea of XOJO and it’s not convenient to use JS becauseI have to embed webcontrol’s controlID in script everytime.
Is there any easier way that can not only be as convenient as programing in event handlers of a webcontrol but also response as a local event like what js does?

[quote=206378:@?? ?]As far as I know, I can use executeJavaScript function to add JS or Jquery scripts to implement a local event. But we know that abuse of JS is against the idea of XOJO and it’s not convenient to use JS becauseI have to embed webcontrol’s controlID in script everytime.
Is there any easier way that can not only be as convenient as programing in event handlers of a webcontrol but also response as a local event like what js does?[/quote]

JS is a valid way of implementing functions that would not perform well enough server side. And, really, embedding the control ID is not difficult.

Thank you for your recognition. A further question : Is there a better way to deal with the client side event ? I I used the following code (ignore some syntactic errors) :

[webpage1.show event] webpage1.executejavascript( JS or JQuery scripts, for example, $(#'img1.controlID').mousedown(function(){alert('mousedown');})

Because the controlID is dynamic, I can’t predefine a js script file or constant. It adds the complexity of coding, i think.

[quote=206423:@?? ?]Thank you for your recognition. A further question : Is there a better way to deal with the client side event ? I I used the following code (ignore some syntactic errors) :

[webpage1.show event] webpage1.executejavascript( JS or JQuery scripts, for example, $(#'img1.controlID').mousedown(function(){alert('mousedown');})

Because the controlID is dynamic, I can’t predefine a js script file or constant. It adds the complexity of coding, i think.[/quote]

self.executejavascript( "$('Div#"+ImageView1.ControlID+"').mousedown(function(){alert('mousedown');});")

You want to use the developers tools of the browser to look at the exact name of elements. Or use getElementByID.

Do not forget to put the necessary headers in App HTML Header if you plan on using JQuery.

You might want to look into the WebControlSDK, then you can keep all events on a control client-side if you want.