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; etc）并将实例方法添加到原型中。如果您所追求的功能就是这么简单，那么为什么还要使用方法呢？

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

我不确定为什么你会在附加事件订阅者后立即触发的构造中传递回调。

通过YUI处理事件的问题

1 个答案: