Overview

<div data-click="component_1"></div>
<div data-click="component_1, component_2"></div>
<div data-click="[component_1, component_2]"></div>
<div data-click="component_1: 'book', component_2: 'cat'"></div>
<div data-click="{component_1: 'book', component_2: 'cat'}"></div>
<div data-click='{"component_1": "book", "component_2": "cat"}'></div>

<!-- Executes the "component_1" component when a button or any of its child elements is clicked. -->
<button data-click="component_1">
   <span></span>
</button>

<!-- Executes the components "component_1" and "component_2" on click. -->
<button data-click="component_1, component_2"></button>

<!-- Executes the component "component_1" with the specified data when clicked. -->
<button data-click="component_1: null"></button>
<button data-click="component_1: 'book'"></button>
<button data-click="component_1: {'book': [1, 2]}"></button>

<!-- Executes the components "component_1" and "component_2" with the specified data when clicked. -->
<button data-click="
   component_1: null, 
   component_2: true
"></button>
<button data-click="
   component_1: 'book', 
   component_2: 'cat'
"></button>
<button data-click="
   component_1: {'book': [1, 2]}, 
   component_2: null
"></button>

<!-- Pass the first <div> element found. -->
<button data-click="component_1: $('div')"></button>

<!-- Pass all the <div> elements found. -->
<button data-click="component_1: $('div ?')"></button>

<!-- Pass the parent element <div>. -->
<button data-click="component_1: $('.. div')"></button>

<!-- Pass the first <span> element found inside the current element. -->
<button data-click="component_1: $('@ span')">
   <span></span>
</button>

<!-- Pass an array of elements. -->
<button data-click="
   component_1: [
      $('div ? 0'), 
      $('div ? 2')
   ]
"></button>

<!-- Pass an object of elements. -->
<button data-click="
   component_1: {
      book: $('<<'),
      cat: $('@ span')
   }
"></button>

<!-- 
   An object with the "block" property, containing an array of <div> elements, 
   will be passed to the "component_1" component.

   An object with the "blockSecond" property, containing a <span> element, 
   will be passed to the components "component_2" and "component_3".
-->
<button data-click="component_1, component_2"></button>
<button data-click="component_3"></button>

<div data-use="component_1" data-name="block"></div>
<div data-use="component_1" data-name="block"></div>
<span data-use="component_2, component_3" data-name="blockSecond"></span>

<!-- The component "component_2" executes only after the component "component_1" has completed. -->
<button data-click="
   component_1: {
      await: {
         component_2: null
      }
   }
"></button>

<!--
   The components "component_2" and "component_3" execute only after the component "component_1" has completed.
   The component "component_4" executes only after the component "component_3" has completed.
-->
<button data-click="
   component_1: {
      name: 'cat',
      secondName: 'book',
      await: {
         component_2: null,
         component_3: {
            name: 'cat',
            secondName: 'book',
            await: {
               component_4: $('div')
            }
         }
      }
   }
"></button>

<button data-click="component_1" data-contextmenu="component_1, component_2"></button>

<textarea data-input="component_1" data-resize="component_2" data-visible="component_3"></textarea>

<button 
   data-click="
      component_1: {
         name: 'cat',
         secondName: 'book',
         await: {
            component_2: null
         }
      }
   "
   data-contextmenu="
      component_1: {
         name: 'cat 2',
         secondName: 'book 2',
         await: {
            component_2: null
         }
      }
   "
></button>

<!-- The event triggers only when <li> elements are clicked. -->
<ul data-click-in="component_1">
   <li></li>
   <li></li>
   <li></li>
</ul>

<!-- 
   The event will be triggered on the <div> element 
   only if the click occurs outside of it or its child elements. 
-->
<div data-click-out="component_1">
   <span></span>
</div>

<!-- 
   The "click" event will be triggered every time the <button> is clicked.
   The "visible" event will only trigger once, the first time it is called.
-->
<button data-click="component_1" data-visible="component_2"  data-call-visible="1"></button>

<!-- Executes the component "component_1" after a 500ms input delay. -->
<input type="text" data-input="component_1" data-debounce-input="500">

<!-- Executes the component "component_1" no more than once every 500ms during input. -->
<input type="text" data-input="component_1" data-throttle-input="500"> 

<!-- Executes the component "component_1" after a 500ms scroll delay. -->
<div data-scroll="component_1" data-debounce-scroll="500"></div>

<!-- Executes the component "component_1" no more than once every 500ms during scroll. -->
<div data-scroll="component_1" data-throttle-scroll="500"></div>

<!-- Disables all events associated with the <div> element. -->
<div data-event="false"></div>

<!-- Disables the specified events associated with the <div> element. -->
<div data-off="click, visible"></div>