Проблема с обработкой событий через YUI - PullRequest
Новая
       13

Проблема с обработкой событий через YUI

0 голосов
/ 21 декабря 2010

Когда пользователи нажимают на элемент ввода «поиск», текст поиска внутри ввода исчезает, и, поскольку у меня есть несколько подобных элементов управления, я подумал, что смогу сделать код многократно используемым.Вот мой код, ранее сделанный и работающий с 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);
         });
    }   
}

1 Ответ

1 голос
/ 21 декабря 2010

У вас здесь много ненужного кода.

Входные параметры, передаваемые в конструктор RemovableText, доступны при закрытии для всех методов, определенных внутри. Вам не нужно и не следует переопределять именованные параметры как 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();
        }
    };
}

Определение метода экземпляра из конструктора кажется сомнительным, так как требуется, чтобы значения, передаваемые в конструктор, оставались закрытыми. Просто назначьте их свойствам экземпляра (this._target = target; и т. Д.) И добавьте методы экземпляра в прототип. Если функциональность, к которой вы стремитесь, проста, тогда зачем вообще беспокоиться о методах?

Использование события click не поддерживает навигацию с помощью клавиатуры. Вы должны использовать событие фокуса.

Я не уверен, почему вам нужно было передать обратный вызов на этапе строительства, который срабатывает сразу после присоединения подписчиков события.

...