通过 YUI 处理事件的问题

Question

当用户单击“搜索”输入元素时，输入中的搜索文本将消失，并且由于我有几个类似的控件，我认为我可以使代码可重用。这是我以前完成并使用 jQuery 的代码，但现在在 YUI 中我无法使其工作。

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

这里有很多不必要的代码。

传递给 RemovableText 构造函数的输入参数可通过内部定义的所有方法的闭包获得。您不需要也不应该将命名参数重新定义为变量。

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();
        }
    };
}

构造函数中实例方法的定义似乎很可疑，因为传递给构造函数的值必须保持私有的要求。只需将它们分配给实例属性（this._target = target; 等）并将实例方法添加到原型即可。如果您想要的功能就是这么简单，那么为什么还要费心使用方法呢？

使用点击事件不支持键盘导航。您应该使用焦点事件。

我不确定为什么您会在构造时传递一个回调，该回调在附加事件订阅者后立即触发。