Defining event handlers

Platform provides a way to specify JavaScript handlers for HTML events. To access this feature, navigate to an object's definition page (from the application switcher, navigate to Setup HomeApplication Setup > Objects and click the object) Scroll down to the Fields section and click the Events link in the Action column for a particular field.

Alternatively, you can navigate to the Field View page and select Event Handlers from the More Actions drop-down menu.

Different field types expose different event handlers. For instance, a text input box exposes the following: onchange, onclick, onfocus, onblur, onkeypress, onkeydown, onkeyup, onselect, onmousedown, onmouseup, onmouseover, onmouseout. A picklist exposes the following: onchange, onclick, onfocus, onblur, onmouseover, onmouseout. Read-only and hidden fields do not expose any handlers.

The following screen shows an example screen that defines event handling code for an email address:

The Event Handlers Helper allows you to select names of other object fields and values or integration codes for picklists and lookups. Select a field from the drop-down menu. The value to use in JavaScript displays in the center field. Note that, unlike similar helper components for templates, these helper tokens contain just the fields' integration names rather than template tokens. These names can be used to refer to HTML elements in client-side JavaScript.

To view how your event handling code appears in generated HTML at runtime, click Debug to open the debug window. This window displays the actual field's HTML and renders the component below.

Before testing HTML event handlers, turn on notifications about JavaScript errors in your browser. Note that generated HTML event-handling code will be enclosed in double quotes, as shown in the onfocus method above. If you need to use a double quote inside your code, precede it with a backslash instead, such or consider using a single quote.

Try to keep your event handler code relatively short. For longer handlers, you can call JavaScript functions inside custom script components in your page(s).

You can use this in the body of event handlers to refer to the field and its properties. You can also pass this as parameter to any custom JavaScript functions that need to work with this field.

Event handling code is stored per field. Once specified, event handling code will be used for all new, edit, and status changes pages.