An HTML element of any tag can be given the CSS class celOnEvent, which marks the element relevant for the EventManager. It will then look for the specific data attribute data-cel-event.
The attribute data-cel-event value is expected to be in the following syntax in order the define the logic:
- event on which will be observed for the element the attribute is defined at, e.g. click
- + the action that will be executed upon event firing. can be extended, currently there are three actions available:
- + addClassName
- - removeClassName
- % toggleClassName
- cssClassName which will be added/removed on the target elements
- cssSelector defines the target elements on which the class will be added/removed. prefixing the selector with ^ will match up the DOM.
- me references the (current) target element
- origin references the origin element (since 4.3).
Multiple definitions with this syntax can be added to a data attribute by separating them with the character ’&’:
- celEM:init is fired on the source element right after it has been initialized by the EventManager. It is the earliest possible event which can be defined in the data attribute.
Toggle Navigation Menu on a button click:
<div class="menuIcon celOnEvent" data-cel-event="click%openNavigation:#navigation">
Hide empty elements upon load (with JS condition):
<div class="celOnEvent" data-cel-event="load+hide:.pageDependentContent>img?me.innerText.trim().empty()"></div>
On successful initialization the EventManager will add celOnEventInit to the element. If it is missing, check the console log for an exception. More info on the process is logged on debug level if required.