A generic handler for invoking element methods on any element.
Invoke Behavior has a sister implementation in
(see docs / examples)
that is the prefered implementation to use.
Use this behavior filter when you have a bunch of items that have links that you want to use to invoke an element method. Imagine a table of things or a form with tons of inputs. This behavior lets you declare desired behavior on the top level element (the table, the form) and monitor child elements for events (clicking a row, changing an input) and then invoke an element method on an element relative to the parent (the table, the form) or the target (the row, the input).
This is rather specialized, which is why the delegator is the preferred usage.
The example below shows two uses of this filter. First, on the top level element, you can see how the pattern works when you use a parent element to watch for events on child elements. This allows a form to watch for changes on all its inputs, for example.
But the other use is a specific element that, when interacted with, invokes the desired method. I.e. click this button and change that element over there. Here there's no delegation and the event target is the element with the filter.
<div data-behavior="Invoke" data-invoke-options=" 'events':[ 'change:relay(input)', 'click:relay(.toRed)' ], 'action':'addClass', 'args':['red'], 'targets':'input' "> <div class="form-group"> <label for="one">This turns red when you change it</label> <input id="one" type="text" class="form-control"/> </div> <button type="submit" class="btn btn-default toRed">Clicking me also turns the input red</button> <button type="submit" class="btn btn-default" data-behavior="Invoke" data-invoke-options=" 'action': 'removeClass', 'args': ['red'], 'targets': '!div input' " >Clicking me also turns the input white again</button> </div>
These options apply only to the
data- tag invocation.
|events||array||['click']||A list of events to monitor on the element with the filter. Can specify delegated
If you're not using a relayed event (
|action||string||~||What method to invoke. This can be any element method. This includes all the
MooTools Element methods and,
for that matter, any element shortcuts (such as
|args||array||~||The arguments passed to the method. If you don't want to pass any arguments, you still need to specify an (empty) array.|
|targets||string||~||The selector to find elements to invoke the method on. This is required unless you pass
in an option for
|targetsFromEventTarget||string||~||Same as the