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.

Liked This Article?

We have a lot more where that came from! Join 2,900,173 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Rotem Ben Itzhak
Rotem Ben Itzhak
Rotem is a developer in Elementor's Editor team, passionate about exploring new technologies, creating music, and turning coffee into code.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss an update
Subscribe to our developer’s newsletter for every latest update