Sandbox: JavaScript

Because Delegator is inefficient for mouse over/out events, this behavior allows you to invoke delegator triggers on elements when they occur using normal event monitoring.

Example

Here's a simple example that changes a class on a target when you mouse over or focus each different form input.

<input data-behavior="Trigger"
  value="I turn the box red"
  data-trigger-options="
    'triggers': [
      {
        'events': ['mouseover', 'focus'],
        'targets': {
          'self': {
            '!div .box::addClass': {
              'class':'red'
            }
          }
        }
      }
    ]
  ">
  <input data-behavior="Trigger"
    value="I turn the box white"
    data-trigger-options="
      'triggers': [
        {
          'events': ['mouseover', 'focus'],
          'targets': {
            'self': {
              '!div .box::removeClass': {
                'class':'red'
              }
            }
          }
        }
      ]
    ">
  <div class="box"></div>

Considerations

This behavior finds all the elements specified as targets and calls addEvent upon them at startup. Be wary of this startup cost. Further, be aware that, because the elements are monitored directly, this control is not "live" to changes in the DOM.

Behavior Options

There is only one option for this filter - triggers. This is an array of the triggers you wish to invoke for different events. Here's the structure:

  <div data-behavior="Trigger"
      data-trigger-options="
        'triggers': [
          {
            'events': ['mouseover', 'focus'], //which events to monitor
            'targets': {
              'div.monitorMouseOver': { //elements whose events we monitor
                'div.foo::addClass': { //selector for elements to invoke trigger :: trigger name
                  'class': 'foo', //api options for trigger
                  'if': {
                    'div.bar::hasClass': ['boo']
                  }
                }
              }
            }
          }
        ]
      "
  >...</div>

Each item in the array is an Object with two properties:

  • events - an array of DOM events to monitor. If you only have one event you wish to monitor you can just specify the string.

  • targets - an object containing as keys the selectors to find elements to monitor. This uses the conventions of Behavior which allows you to use the two special selectors self and window.

    The values for these keys are standard Delegator target/trigger objects. Briefly, they are expressed as 'selector::triggerName':{..configuration...} where the selector is the element to invoke the specified trigger when the event fires for the target, while the configuration are just the key/values for the trigger itself.

In the example above, the configuration states that the div with the Trigger behavior on startup is searched for elements within it matching the selector div.monitorMouseOver. These elements are monitored for both mouseover and focus. When those events occur on any div.monitorMouseOver element, any div.foo element within it has the Delegator trigger addClass invoked upon it with the configuration class: 'foo' but only if an element within it matches div.bar.boo.

I realize this example is a little over the top; it's designed to show the range of the plugin. The working example above is perhaps more typical.