JSEventHandler - User Control

Unofficial Content

The JSEventHandler control lets you capture javascript events when they are triggered on a web form control. It is a "behavioral" user control, that is, it does not show any control on the page, it just captures the assigned javascript events and executes a GeneXus event.


Using the control

Drag the control from the Toolbox and drop it anywhere in the form. The place where you drop it within the form is not important, as the control has no visual behavior.

Example 1 - Using a GeneXus control

Event Start
    &eventlist.Add("mouseover") //&eventlist is a variable Character (collection), created automatically
    JSEventHandler1.AttachedControl = TextBlockSample.InternalName //TextBlockSample is a textblock on the web form
    &img.FromImage(email1) //&img is a bitmap variable on form and email1, email2 image objects

Event JSEventHandler1.EventHandled
    Do Case
        Case JSEventHandler1.EventType = "mouseover"
            &img.FromImage(email1) //restore original image onmouseover
        Case JSEventHandler1.EventType = "mouseout"
            &img.FromImage(email2) //change image onmouseout

Example 2 - Using document as a attached control (character counter)

Event Start
    JSEventHandler1.AttachedControl = "document"

Event JSEventHandler1.EventHandled
    &Length= &string.Length() // Eg: &Length variable on the form

Other document Events

  • click
  • dblclick
  • keydown
  • keypress
  • keyup
  • mousedown //user depresses the mouse button on this element
  • mouseup //user releases the mouse button on this element
  • contextmenu

Most used "window" Events:

  • resize
  • scroll

Control properties

ControlName Name of the control


Sets control's width


Sets control's height


EventList collection variable

Control Events

The user control triggers an EventHandled event as described above.

Please visit: Default Installation Instructions for User Controls to install it.

Download the JSEventHandler  User Control from the MarketPlace: Download here


Warning: It is recommended to use this User Control on the plain level of objects, you do not need to drag it to Grids (or any substructure) because it is behavior is related to Javascript events and are not related to data management..