https://github.com/nickstenning/moodelegate

An implementation of event delegation (with fixes for focus/blur/submit/reset events) written with MooTools.
https://github.com/nickstenning/moodelegate

Last synced: 9 days ago
JSON representation

An implementation of event delegation (with fixes for focus/blur/submit/reset events) written with MooTools.

• Host: GitHub
• URL: https://github.com/nickstenning/moodelegate
• Owner: nickstenning
• Created: 2008-08-13T15:59:39.000Z (almost 18 years ago)
• Default Branch: master
• Last Pushed: 2008-08-13T16:33:03.000Z (almost 18 years ago)
• Last Synced: 2025-10-29T07:07:52.150Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 97.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
MooDelegate

===========

A simple library for event delegation using the 

[MooTools](http://mootools.net) JavaScript library. At its simplest, 

delegator.js implements a #delegate method on Element, so you can call:

    $('myelement').delegate('li.delete', 'click', function () {

        this.dispose();

    });

This would make sure that any child of 'myelement' that was a list item with 

the class "delete" would be removed from the DOM when it was clicked. This 

applies no matter when the list item was added to the DOM: even if it was 

added *after* the call to delegate.

A more advanced (and yet simpler) way to use MooDelegate is to use the 

included Controller class:

HTML:

    


      Hello

      Bigger

      Smaller

    


JS:

    var TextSizeController = new Class({

      Extends: Controller,

      

      // ... see examples/textsize.html for the full example.

      

      controls: {

          '#bigger click': function () {

            this.increaseSize();

          },

          '#smaller click': function () {

            this.decreaseSize();

          }

      }

  

    });

    window.addEvent('domready', function () {

      new TextSizeController($('textsizeController'));

    });

OK, so it's a silly example, but you should get the idea. Once you've made

that call to new TextSizeController in the above example, you could remove the

"bigger" button from the DOM, to prevent the user making the text bigger, and then put it back in, and it would work just as expected.