Hooks & Events

Hooks

TODO

Events

Events will be activated at different moments in the client-side code. You can use your own custom script to connect with these events and run your own code when needed. It's important to remember not to solely depend on these events because they can be manually triggered by potential attackers. Always make sure to perform server-side validation for security.

Event	Description
init	This event fires when the widget has been fully built, and the image details have been successfully requested from the server.
selected	This event fires when the user selects an icon, regardless of whether the selected icon is correct or not.
refreshed	This event fires when the user selects an incorrect icon, and the widget completes the process of refreshing its challenge.
timeout	This event fires when the user makes too many incorrect selections, and the widget enters a timeout mode for a specific period.
invalidated	This event fires when the widget invalidates itself after a defined period of user inactivity.
reset	This event fires when a widget is manually reset using the reset function.
success	This event fires when the user selects the correct icon.
error	This event fires when the user selects an incorrect icon.

Listen for events

To catch these events, you can bind listeners to the initialized widget instance. If you want to listen to these events no matter which widget is causing them, you can opt for IconCaptcha.bind(...) instead. The widget identifier of the captcha which triggered the event can be accessed via e.detail.captchaId.

document.addEventListener('DOMContentLoaded', function () {
   
    // Example of widget specific event listeners.
    IconCaptcha.init('.iconcaptcha-widget', {
        ...
    })
    .bind('init', function(e) {
        console.log(e.detail.captchaId);
    }).bind('selected', function(e) {
        //
    }).bind('refreshed', function(e) {
        //
    }).bind('invalidated', function(e) {
        //
    }).bind('reset', function(e) {
        //
    }).bind('success', function(e) {
        //
    }).bind('error', function(e) {
        //
    });

    // Example of global event listeners.
    IconCaptcha.bind('init', function(e) {
        console.log(e.detail.captchaId);
    }).bind('selected', function(e) {
        //
    })
});