addEvent, removeEvents, set, removeProperty

Add and remove an event. Set and remove element attributes.

by andfinally

HTML

<button id="show_rabbit" disabled="disabled">showRabbit</button>
<button id="hide_rabbit">hideRabbit</button>
<button id="attach_magic" disabled="disabled">attachMagic</button>
<button id="detach_magic">detachMagic</button>
<p id="rabbit">I am a rabbit, believe it or not</p>

CSS

#rabbit
{
    margin: 20px;
    padding: 20px;
    background: black;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px; 
}

JavaScript

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

    var rabbit = $('rabbit');
    var showRabbit = $('show_rabbit');
    var hideRabbit = $('hide_rabbit');
    var attachMagic = $('attach_magic');
    var detachMagic = $('detach_magic');

    var Fin = function() {
        rabbit.fade('in');
        showRabbit.set('disabled', 'disabled');
        hideRabbit.removeProperty('disabled');
    };

    var Fout = function() {
        rabbit.fade('out');
        hideRabbit.set('disabled', 'disabled');
        showRabbit.removeProperty('disabled');
    };

    var AMag = function() {
        showRabbit.addEvent('click', Fin);
        hideRabbit.addEvent('click', Fout);
        attachMagic.set('disabled', 'disabled');
        detachMagic.removeProperty('disabled');
    };

    var DMag = function() {
        showRabbit.removeEvents('click');
        hideRabbit.removeEvents('click');
        detachMagic.set('disabled', 'disabled');
        attachMagic.removeProperty('disabled');
    };

    attachMagic.addEvent('click', AMag);
    detachMagic.addEvent('click', DMag);
    showRabbit.addEvent('click', Fin);
    hideRabbit.addEvent('click', Fout);

});