A class for dynamic inputs This class creates dynamic input labels.  You give it a pair of elements and it sets up the event listeners and CSS toggles to accomplish this.

Looking for feedback on code structure and correctness.

Toggle classes do what they say, they toggle one class on and another class off.

/***************************************************************************************************
**SDynInput - provides dynamic input for labels and borders
*/
    var SDynInput = $A.Class.create({
        Name: 'SDynInput',
        A: {

            // CSS classes used to toggle the label
            toggle_label_hide:       'toggle_label_hide',
            toggle_label_obscure:    'toggle_label_obscure',
            toggle_label_show:       'toggle_label_show',

            // CSS classes used to toggle the border
            toggle_border_hide:      'toggle_border_hide',
            toggle_border_obscure:   'toggle_border_obscure',
            toggle_border_show:      'toggle_border_show',

            // speed of label expanding
            speed:                   200
        },

        // elements are passed in as input/label pairs
        set: function (pair_array) {
            var index;
            for (index = 0; index &lt; pair_array.length; index += 2) {
                this.applyEL(pair_array[index], pair_array[index + 1]);
            }
        },

        // apply event listeners to the input elements
        applyEL: function (input_element, label_element) {
            var self = this;
            input_element.addEventListener("blur", function () {
                if (input_element.value === '') {
                    $A.addClass(input_element, self.A.toggle_border_show);
                    $A.addClass(label_element, self.A.toggle_label_show);
                    $A.expandFont(label_element, 'up', self.A.speed);
                }
            }, false);
            input_element.addEventListener("focus", function () {
                if (input_element.value === '') {
                    $A.addClass(input_element, self.A.toggle_border_obscure);
                    $A.addClass(label_element, self.A.toggle_label_obscure);
                }
            }, false);
            input_element.addEventListener("paste", function () {
                $A.addClass(label_element, self.A.toggle_label_hide);
                $A.addClass(input_element, self.A.toggle_border_hide);
            }, false);
            input_element.addEventListener("keypress", function () {
                $A.addClass(label_element, self.A.toggle_label_hide);
                $A.addClass(input_element, self.A.toggle_border_hide);
            }, false);
            input_element.addEventListener("drop", function () {
                $A.setTimeout(function () {
                    $A.addClass(label_element, self.A.toggle_label_hide);
                    $A.addClass(input_element, self.A.toggle_border_hide);
                }, 0);
            }, false);
        }
    }, true);
The code is not bad;


Quite configurable
Helper functions


However,


There is quite a bit of copy paste code
Placing the style classes in self.A. makes for verbose code
The css classes themselves are lengthy as well
onBlur keeps making the font larger, but focus does not make the font smaller, which could cause comically large labels
applyEL -> applyEventListeners reads/parses better 


This could be done instead:

/*****************************************************************************************
 **SDynInput - provides dynamic input for labels and borders
 */
var SDynInput = $A.Class.create({
    Name: 'SDynInput',
    // elements are passed in as input/label pairs
    set: function (inputLabelPairs) {
        var index;
        for (index = 0; index &lt; inputLabelPairs.length; index += 2) {
            this.applyEventListeners(inputLabelPairs[index], inputLabelPairs[index + 1]);
        }
    },
    // apply event listeners to the input elements
    applyEventListeners: function (input, label) {
        var self = this,
            labelSpeed = 200,
            // CSS classes used to toggle the label
            hideLabel = 'toggle_label_hide',
            obscureLabel = 'toggle_label_obscure',
            showLabel = 'toggle_label_show',
            // CSS classes used to toggle the input border
            hideBorder = 'toggle_border_hide',
            obscureBorder = 'toggle_border_obscure',
            showBorder = 'toggle_border_show',
            applyClasses = function (inputClass, labelClass) {
                $A.addClass(input, inputClass);
                $A.addClass(label, labelClass);
            },
            applyHidingClasses = function () {
                applyClasses(hideBorder, hideLabel);
            };
        input.addEventListener("blur", function () {
            if (input.value === '') {
                applyClasses(borderShow, labelShow);
                $A.expandFont(label, 'up', labelSpeed);
            }
        }, false);
        input.addEventListener("focus", function () {
            if (input.value === '') {
                applyClasses(borderObscure, labelObscure);
            }
        }, false);
        input.addEventListener("paste", applyHidingClasses false);
        input.addEventListener("keypress", applyHidingClasses, false);
        input.addEventListener("drop", function () {
            $A.setTimeout(applyHidingClasses, 0);
        }, false);
    }
}, true);