Question

When users click “search” input element, the search text inside the input will disappear and since I have several controls like that, I thought I could make the code reusable. Here is my code formerly done and working with jQuery but now in YUI I cannot make it work.

var subscriptionBoxTarget = "div.main div.main-content div.side-right div.subscription-box input";
var ssbNode = YAHOO.util.Selector.query(subscriptionBoxTarget);
var ssbValue = YAHOO.util.DOM.getAttribute(ssbNode,"value");
var subscriptionBox = new RemovableText(ssbNode,ssbValue,null);
subscriptionBox.bind();
////////////////////////////////

//target : the target of the element which dispatches the event
// defaultText : the default for input[type=text] elements
// callBack : is a function which is run after everthing is completed
function RemovableText(target,defaultText,callBack)
{
    var target = target; //private members 
    var defaultText = defaultText;
    var callBack = callBack;

    //instance method
    this.bind = function()
    {
        mouseClick(target,defaultText);
        mouseOff(target,defaultText);
        if(callBack != null)
            callBack();
    }

    //private methods
    var mouseClick = function(eventTarget,defaultValue)
    {
        var _eventTarget = eventTarget;
        var _defaultValue = defaultValue;
        /*$(eventTarget).bind("click",function(){
            var currentValue = $(this).val();
            if(currentValue == defaultValue)
                $(this).val("");
        });*/
         YAHOO.util.Event.addListener(_eventTarget,"click",function(e){
            alert(e);
         });
    }

    var mouseOff = function(eventTarget,defaultValue)
    {
        var _eventTarget = eventTarget;
        var _defaultValue = defaultValue;
        /*$(eventTarget).bind("blur",function(){
            var currentValue = $(this).val();
            if(currentValue == "")
                $(this).val(_defaultValue);
        });*/
         YAHOO.util.Event.addListener(_eventTarget,"blur",function(e){
            alert(e);
         });
    }   
} 

Answer 1

You have a lot of unnecessary code here.

The input parameters passed to the RemovableText constructor are available by closure to all the methods defined inside. You don’t need to, and shouldn’t redefine named params as vars.

function RemovableText(target, defaultText, callback) {
    this.bind = function () {
        YAHOO.util.Event.on(target, 'click', function (e) {
            /* You can reference target, defaultText, and callback in here as well */
        });

        YAHOO.util.Event.on(target, 'blur', function (e) { /* and here */ });

        if (callback) {
            callback();
        }
    };
}

The definition of an instance method from within the constructor seems dubious, as is the requirement that the values passed to the constructor must be kept private. Just assign them to instance properties (this._target = target; etc) and add instance methods to the prototype. If the functionality you’re after is just this simple, then why bother with methods at all?

Using the click event does not support keyboard navigation. You should use the focus event.

I’m not sure why you would have a callback passed at construction that fires immediately after attaching the event subscribers.