Synthetic Events

The synthetic events emulate the behavior of the hosted field on the container to which it is mounted. For example, when the input#text fire oninput, onfocus, onblur inside the iframe then the container (div#card-number) will also dispatch similar synthetic events outside the iframe.

You can listen to these synthetic events and also has access to the synthetic value (or masked value) of the hosted fields:

• Synthetic form events are dispatched by the parent form element: ready, valid, invalid.
• Synthetic field events are dispatched by an individual field: input, focus, blur, valid, invalid, empty, not-empty.

Disable Synthetic Events

Synthetic events allow your container element (the div tag) to behave like an input text element. If this convenient feature causes unwanted effects, use thedisableSyntheticEvents: true to disable it

const hostedFields = new LwHostedFields({  
    ...  
    disableSyntheticEvents: true,  
});  
hostedFields.mount();

Without synthetics events, you can rely on the event hooks configuration as an alternative.