Description
Attaches an event handler to an event that occurs on a specific element in the DOM. The DOM element must have a ‘data-action’ attribute. The value of the data-action attribute is used in the event_selector argument to specify on which element the event must occur.
It is not possible to attach an event handler to a DOM element if another SuiteCommerce event is already attached to the element.
The following events are supported:
- blur
- change
- click
- contextmenu
- change
- dblclick
- error
- focus
- focusin
- focusout
- keydown
- keypress
- keyup
- load
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup
- resize
- scroll
- select
- submit
- touchend
- touchmove
- touchstart
- unload
EXAMPLE
The following example shows basic usage of this method. In the module file, addToViewEventsDefinition() is used to attach a click event handler to a DOM element that has the attribute data-action="sidebar-toggle-icon-clickable", which is in a view with ID Header.View. The callback function is an anonymous function that simply logs the event data to the browser console.
In the template file associated with the view, an <i> element has the data attribute data-action="sidebar-toggle-icon-clickable", which is referenced in the event selector string.
moduleFile.js
<!-- wp:paragraph -->
<p>layout = container.getComponent('Layout');</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>layout.addToViewEventsDefinition(<br>'Header.View',<br>'click [data-action="sidebar-toggle-icon-clickable"]',<br>function(event) {<br>console.log(event);<br>}<br>);</p>
<!-- /wp:paragraph -->- templateFile.tpl
<div class="header-sidebar-toggle-wrapper">
<button class="" data-action="header-sidebar-show">
<i class="header-sidebar-toggle-icon" data-action="sidebar-toggle-icon-clickable"></i>
</button>
</div>