A New Method for Attaching a JS Handler to an Element

In Elementor 3.1.0 version, we created a new method for attaching a JS handler to an element.

Up to Elementor 3.1.0, in order to attach a JS handler, we used a hook called addAction, and passed a function to it (addHandler):

const addHandler = ( $element ) => {
	elementorFrontend.elementsHandler.addHandler( ElementHandlerClass, {
		$element,
	} );
};
 
elementorFrontend.hooks.addAction( 'frontend/element_ready/your-element-name.default', addHandler );

For more details, see here.

In the example above, the hook event: 'frontend/element_ready/your-element-name.default' triggers the callback function ‘addHandler’ and the handler becomes attached to the element.

Starting from Elementor 3.1.0, the ‘addHandler‘ function should not be used directly anymore, Instead, we created a new method for handling the attachment in a more efficient way:

attachHandler( elementName, Handlers, skin );

Function arguments:

• elementName – { string } example: ‘your-element-name’ (the name returned in the get_name() method in your elementt’s PHP class).
• Handlers – { class / array of classes } – The element handler.
• skin – { string } (optional) default value: ‘default’ – Defines the element skin type (in order to disable the skin type, use: null).

How to use the “attachHandler” function?

elementorFrontend.elementsHandler.attachHandler( 'your-element-name', ElementHandlerClass );

The new method handles the handler attachment in a short and simple way. The result of running this example is equivalent to the result received by the old way of attaching a handler to an element.

Note:

• The second argument of the function, ‘Handlers’, can also get an array of handlers and when the event will be triggered, all handlers will be added to the element.
• When a different ‘skin’ type is needed, use the third argument of the function as follows:

lementorFrontend.elementsHandler.attachHandler( 'your-element-name', ElementHandlerClass, 'custom' );

In this case,  the hook name will change to : 'frontend/element_ready/your-element-name.custom'.

The handler will be added automatically when the event will be triggered.

Conditional handlers attachment

In some cases, adding a handler to an element is dependent on a certain condition. For these cases, a new method was created called isActive().

By default, the method returns true. When a conditional attachment is needed, the isActive method should be inherited in the handler class and should return the condition evaluation.

Here is a detailed example of using the isActive function in an element handler class:

class ElementHandlerClass extends elementorModules.frontend.handlers.Base {
    getDefaultSettings() {
        return {
            selectors: {
                firstSelector: '.firstSelectorClass',
                secondSelector: '.secondSelectorClass',
            },
        };
    }
 
    getDefaultElements() {
        const selectors = this.getSettings( 'selectors' );
        return {
            $firstSelector: this.$element.find( selectors.firstSelector ),
            $secondSelector: this.$element.find( selectors.secondSelector ),
        };
    }
 
    bindEvents() {
        this.elements.$firstSelector.on( 'click', this.onFirstSelectorClick.bind( this ) );	
    }
 
    onFirstSelectorClick( event ) {
        event.preventDefault();
 
        this.elements.$secondSelector.show();
   }
 
   isActive( settings ) {
        return settings.$element.hasClass( 'elementor-section-stretched' );
   }	
}
 
jQuery( window ).on( 'elementor/frontend/init', () => {
   elementorFrontend.elementsHandler.attachHandler( 'your-element-name', ElementHandlerClass );
} );

Why did we make this change?

• In order to supply a short and easy way for attaching handlers while ensuring a uniform structure for adding handlers to elements.
• Separating the handler attachment logic to a dedicated method ensures a more organized, testable and structured code.