Skip to content

Commit

Permalink
Minor changes to Element.Delegation documentation.
Browse files Browse the repository at this point in the history
  • Loading branch information
cpojer committed Aug 23, 2011
1 parent a42e816 commit a14bf6f
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions Docs/Element/Element.Delegation.md
@@ -1,26 +1,27 @@
Type: Element {#Element} Type: Element {#Element}
======================== ========================


Extends the [Element][] type to include delegations in the addEvent and addEvents methods. Extends the [Element][] type to include event-delegation in its event system.


Event delegation is a common practice where an event listener is attached to a parent element to monitor its children rather than attach events to all the children. It's far more efficient for dynamic content or when you have numerous items on a page that you want to interact with. Event delegation is a common practice where an event listener is attached to a parent element to monitor its children rather than attach events to every single child element. It's more efficient for dynamic content or highly interactive pages with a lot of DOM elements.


### Demo: ### Demo:


* [Element.Delegation](http://mootools.net/demos/?demo=Element.Delegation) * [Element.Delegation](http://mootools.net/demos/?demo=Element.Delegation)


### Example: ### Example:


An example how delegation is usually used. Delegation is extra useful when working with dynamic content like AJAX. An example of how delegation is usually applied. Delegation is extra useful when working with dynamic content like AJAX.


var myElement = $('myElement'); var myElement = $('myElement');
var request = new Request({ var request = new Request({
// other options… // other options…
onSuccess: function(text){ onSuccess: function(text){
myElement.set('html', text); // no need to attach more click events. myElement.set('html', text); // No need to attach more click events.
} }
}); });
// adding the event, notice the :relay syntax with the selector which matches the target element. // Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){ myElement.addEvent('click:relay(a)', function(event, target){
event.preventDefault(); event.preventDefault();
request.send({ request.send({
Expand Down Expand Up @@ -53,17 +54,17 @@ Delegates the methods of an element's children to the parent element for greater


### Example: ### Example:


// Alerts when an anchor element is clicked with class myStyle in myElement // Alerts when an anchor element with class 'myStyle' is clicked inside of myElement
document.id(myElement).addEvent('click:relay(a.myStyle)', function(){ document.id(myElement).addEvent('click:relay(a.myStyle)', function(){
alert('hello'); alert('hello');
}); });




$('myElement').addEvent('click:relay(a)', function(event, clicked){ document.id('myElement').addEvent('click:relay(a)', function(event, clicked){
event.preventDefault(); //don't follow the link event.preventDefault(); //don't follow the link
alert('you clicked a link!'); alert('you clicked a link!');
//you can reference the element clicked with the second // You can reference the element clicked with the second
//argument passed to your callback // Argument passed to your callback
clicked.setStyle('color', '#777'); clicked.setStyle('color', '#777');
}); });


Expand All @@ -81,7 +82,7 @@ Delegates the events to the parent just as with addEvent above. Works like [addE
$('myElement').addEvents({ $('myElement').addEvents({
// monitor an element for mouseover // monitor an element for mouseover
mouseover: fn, mouseover: fn,
// but only monitor child links for click // but only monitor child links for clicks
'click:relay(a)': fn2 'click:relay(a)': fn2
}); });


Expand Down

0 comments on commit a14bf6f

Please sign in to comment.