Wherever you have a pattern of behaviour in performing
operations upon
elements with the same css pattern.
E.g.
Consider that this is some HTML...
<ul id='example'>
<li onclick="clicked();">Test 1
<li onclick="clicked();">Test 2
<li onclick="clicked();">Test 3
</ul>
Our aim is to have nice HTML like this:
<ul id='example'>
<li>Test 1
<li>Test 2
<li>Test 3
</ul>
and then do the following (without behaviour.js)
<script>
var ulNode = document.getElementById('example');
var liNodes = ulNode.childNodes;
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].onclick = function() { click(); };
}
</script>
But that's ugly too.
So, instead we do this:
<script>
var rules = { '#example li' : function(element) {
element.onclick =
function() { click(); } } }
Behaviour.register(rules);
</script>
And we have a picture of loveliness.
Epilogue:
The function(element) { ... } part is executed for each DOM
element
that matches the rule (e.g. '#example li'). So, what we're
doing is
specifying a loop expression inside the { ...} part. In the
example,
we're assigning each element a function to its onclick
attribute.
But, you could do anything with/to the element. Mostly I
think ppl
using it to assign things to onclick, onmouseover, etc.
Cheers
Nic
|