Elementor was originally developed using jQuery. This means the editor, and many components that trigger events, had to use jQuery events. The issue with jQuery events is that they are not native JS events wrapped in a jQuery method, they utilize a completely separate mechanism. This led to frustration within the external developers community as developers couldn’t listen to events using the addEventListener() method – they were forced to use jQuery .on() method.
Dual Support
To address the issue, we mapped all the events Elementor triggers, in the frontend. Elementor 3.5 introduced an event dispatch method that triggers both jQuery events and native JS events. In Elementor Pro 3.7 we brought the same capabilities to Pro.
Instead of the following:
jQuery( window ).on( 'elementor/event/name', () => { /* … */ });Developers can now use vanilla JS events, like so:
window.addEventListener( 'elementor/event/name', () => { /* … */ });Both versions are currently supported. Saying that, we do encourage addon developers to adopt vanilla JS to prepare your code for the moment Elementor abandons jQuery.
Issue Origins
When triggering JS events, Elementor had inconsistent naming conventions. Some events use colons between namespace elements, and others use slashes. Using colons is a jQuery convention, but vanilla JS events do not support the use of colons in the event name (e.g elementor:init v.s elementor/init).
Essentially, by relying on events with colons, Elementor forced addon developers to use jQuery. This is no longer true – all events have been renamed to use slashes. The old event names with colons still work, but you can only catch them with jQuery. The new event names can be listened to using jQuery and vanilla JS.
Please note that events with colons in their names will be eventually deprecated.
Backward Compatibility
If you plan to adopt JS events, and your addon has compatibility checks, make sure to update the minimum required Elementor version to 3.5 and minimum required Elementor Pro version to 3.7.
