Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Prototype и Event


Автор: izOne 14.2.2007, 12:37
Код

Event.observe($('imagemap'), 'mousemove', function(event){
    $('coordinates').show();
});
Event.observe($('imagemap'), 'mouseout', function(event){
    $('coordinates').hide();
});
Event.observe($('imagemap'), 'click', function(event){
    var aBlockInfo = getBlockInfo(event);
    var form = document.createElement('form');
    form.action = '/formaction';
    form.method = 'post';
    form.id = 'formaction';
    var input = document.createElement('input');
    input.type='hidden';
    input.name='blocks';
    input.value=aBlockInfo[0];
    form.appendChild(input);
    $('body').appendChild(form);
    Event.stopObserving($('imagemap'), 'mousemove', null);
    Event.stopObserving($('imagemap'), 'mouseout', function(){});
    //form.submit();
});


Вот stopObserving и не работает(продолжается обработка mouseout и mouseover) smile Подскажите, пожалуйста, как побороть.

Автор: AKS 14.2.2007, 14:03
izOne, вот http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event же все расписано, а именно - какие аргументы должен получить метод для правильной работы...

Автор: izOne 14.2.2007, 14:30
AKS, 
Я читал эту документацию  и не понял что передавать в качестве observer в stopObserving(element, name, observer, useCapture) когда вешается на обсервинг не конкретная функция, а анонимная.

Автор: AKS 14.2.2007, 14:53
izOne, Вы можете передать ссылку на анонимную функцию, хотя в вашем случае нет необходимости использовать ссылки. Можно так:
Код

function F(e) {
    (e.type == 'mousemove')
     ? $('coordinates').show()
     : $('coordinates').hide();
}
Event.observe($('imagemap'), 'mousemove', F);
Event.observe($('imagemap'), 'mouseout', F);
/* когда-нибудь потом */
Event.stopObserving($('imagemap'), 'mousemove', F);
Event.stopObserving($('imagemap'), 'mouseout', F);

Автор: izOne 14.2.2007, 15:16
AKS, 
Вы привели пример с именованой функцией, но вопрос был в другом ;). И что значит 
Цитата

передать ссылку на анонимную функцию

если она анонимная? 

Автор: Sardar 14.2.2007, 16:16
Цитата(izOne @  14.2.2007,  14:16 Найти цитируемый пост)
Вы привели пример с именованой функцией, но вопрос был в другом ;)

Цитата(izOne @  14.2.2007,  14:16 Найти цитируемый пост)
если она анонимная? 

Возможно удивлю, но в принципе JS нет анонимных и именованных функций. Есть значение "функция" (value), такое же как строка или число. Есть переменная, содержащая функцию, также как любое другое значение. Обращение "по имени" к функции это просто выполнение значения-функции в переменной под конкретным именем (перепиши туда другое значение что бы было ясней).
Вывод: разницы между "анонимными" и "не анонимными" функциями нет.

Что бы удалить обработчик нужно иметь на него ссылку. Передавая null или любую другую функцию ты пытаешься удалить null или эту функцию, а не обработчик зарегистрированный ранее. Таким образом можно регистрировать массу обработчиков и не думать, что кто то может его удалить, разумный подход.

Код
function registerMyEvents(obj) {
    var move, out, click; //handlers
    Event.observe($(obj), 'mousemove', (move = function(event){
        $('coordinates').show();
    });
    Event.observe($(obj), 'mouseout', (out = function(event){
        $('coordinates').hide();
    });
    Event.observe($('imagemap'), 'click', function(event){
        var aBlockInfo = getBlockInfo(event);
        var form = document.createElement('form');
        form.action = '/formaction';
        form.method = 'post';
        form.id = 'formaction';
        var input = document.createElement('input');
        input.type='hidden';
        input.name='blocks';
        input.value=aBlockInfo[0];
        form.appendChild(input);
        $('body').appendChild(form);
        Event.stopObserving($(obj), 'mousemove', move);
        Event.stopObserving($(obj), 'mouseout', out);
        //form.submit();
    });
}
registerMyEvents('imagemap');

Автор: izOne 14.2.2007, 16:25
Sardar, 
Ок. Тогда несколько иначе переформулиря(как удалить обсервер имея казатель на функцию я знал, спасибо что два раза показали ;)).
Код

Event.observe($('imagemap'), 'mousemove', function(event){
    $('coordinates').show();
});

конкретно для этого кода(допустим я к его изменению не имею доступа или он закодирован) я могу удалить обработчик mousemove для $('imagemap')?

Автор: AKS 14.2.2007, 16:28
Никак.

P.S. Если Вы не имеете "доступа", то о чем вообще речь?

Автор: izOne 14.2.2007, 16:30
AKS, 
допустим я к его изменению не имею доступа или он закодирован

Автор: Sardar 14.2.2007, 16:46
izOne, нет, т.к. DOM 2 Event разрабатывался не для JS, а вообще как технология, потому думают о многозадачности и следовательно пытаются оставить как можно меньше способов выстрелить себе в ногу. Философия такова, если не ты ставил обработчик события, значит и не тебе его удалять smile

Автор: izOne 14.2.2007, 17:11
Sardar, 
Ясно smile Возможно это и правильно...

Sardar, 
Цитата

Вывод: разницы между "анонимными" и "не анонимными" функциями нет.

Получается таки что есть - анонимную нельзя удалить из listener'ов ;)


AKS, Sardar - спасибо за обьяснения.

Автор: izOne 14.2.2007, 17:49
В общем сделал так:
Код

var Imagemap = {
    object: $('imagemap'),
    move: function(event){
        var div = $('coordinates');
        var aBlockInfo = Imagemap.getBlockInfo(event);
        var sold = false;
        var skip = false;
        if(aBlockInfo[0] > 0){
            div.innerHTML = 'X: ' + aBlockInfo[1] + ' <br />' + 'Y: ' + aBlockInfo[2] + '<br />' +'N: ' + aBlockInfo[0];
            div.style.border = '1px dashed #FFF';
            div.style.left = Event.pointerX(event) + 20 + 'px';
            div.style.top =  Event.pointerY(event) + 20 + 'px';
            div.style.background = '#888';
            var avalible = true;
            for(var i=0; i<Pixels.length; i++){
                if(Pixels[i].b == aBlockInfo[0]){
                    if(Pixels[i].c > 0){
                        for(var j=0; j<Customers.length; j++){
                            if(Customers[j].id == Pixels[i].c){
                                div.innerHTML = '<h1>' + Customers[j].info.name +'</h1><img src="' + Customers[j].info.logo + '" /><br /><a href="' + Customers[j].info.href + '">' + Customers[j].info.href + '</a>';
                                div.show();
                                break;
                            }
                        }
                    }else{
                        div.hide();
                        Imagemap.object.style.cursor = 'default';
                    }
                    avalible = false;
                    break;
                }
            }
            if(avalible){
                div.innerHTML += '<br />' + '<h1>Free</h1>';
                div.show();
            }
        }
        if(aBlockInfo[1] <= 0 || aBlockInfo[2] <= 0){
            div.hide();
        }
    },
    click: function(event){
        var aBlockInfo = getBlockInfo(event);
        var form = document.createElement('form');
        form.action = '/buypixels';
        form.method = 'post';
        form.id = 'buypixel';
        var input = document.createElement('input');
        input.type='hidden';
        input.name='blocks';
        input.value=aBlockInfo[0];
        form.appendChild(input);
        $('body').appendChild(form);
        Imagemap.stop();
        form.submit();
    },
    out: function(event){
        $('coordinates').hide();
    },
    observe: function(){
        Event.observe(Imagemap.object, 'mousemove', Imagemap.move);
        Event.observe(Imagemap.object, 'click', Imagemap.click);
        Event.observe(Imagemap.object, 'mouseout', Imagemap.out);
    },
    stop: function(){
        Event.stopObserving(Imagemap.object, 'mousemove', Imagemap.move);
        Event.stopObserving(Imagemap.object, 'mouseout', Imagemap.out);
    },
    getBlockInfo: function(event){
        var map = $('imagemap');
        var mapX = Position.cumulativeOffset(map)[0];
        var mapY = Position.cumulativeOffset(map)[1];
        var pointerX = Event.pointerX(event);
        var pointerY = Event.pointerY(event);
        var correctX = pointerX - mapX - 10;
        var correctY = pointerY - mapY - 17;
        var pixelN = parseInt(correctX/10) + (parseInt(correctY/10))*25 + 1;

        return {0:pixelN, 1:correctX, 2:correctY};
    }
}
Imagemap.observe();

 smile 

Автор: AKS 14.2.2007, 18:07
Цитата(izOne)
Получается таки что есть - анонимную нельзя удалить из listener'ов 

Удалить-то можно, вот только prototype.js этого не умеет...

Автор: izOne 14.2.2007, 18:58
AKS, 
Ну тогда возвращаясь к вопросу: как? Пусть даже не через prototype, а чистым JS не имея указателя на функцию. Я не нашел решения smile

Автор: Sardar 14.2.2007, 20:11
Цитата(AKS @  14.2.2007,  17:07 Найти цитируемый пост)
Удалить-то можно, вот только prototype.js этого не умеет... 

Цитата(izOne @  14.2.2007,  17:58 Найти цитируемый пост)
а чистым JS

Ну на самом то деле prototype.js вызывает .addEventListener из DOM 2 Event, так что либа умеет всё, что "чистым JS" можно сделать. А сделать этого нельзя и это хорошая фича дизайна smile

Автор: AKS 14.2.2007, 21:06
izOne, я написал, что можно удалить анонимную функцию, и это немного отличается от того, чтобы удалить "не имея указателя на функцию". Даже prototype.js сохраняет все параметры, передаваемые в метод Event.observe, в Event.observers. Т.е. указатели все же имеются. И значит в этом массиве при желании можно "отыскать" нужные параметры и вызвать с ними Event.stopObserving. Но такой подход библиотека не поддерживает.

Для вашего случая, когда один элемент для события, к примеру, mousemove имеет только один обработчик, такой вариант мог бы подойти. Однако для "тяжелых случаев", когда для одного элемента будут заданы несколько анонимных функций для обработки одного события, соответственно придется "выдумывать" более изощренные способы "борьбы" с анонимностью.

Вот так, вкратце. Это, наверно, не совсем то, чтобы Вы надеялись узнать от меня. Ведь Вам вряд ли захочется браться за модификацию методов библиотеки - Event.unloadCache&Event.stopObserving...

Автор: izOne 15.2.2007, 01:39
AKS, 
Именно это и хотелось услышать ;) Только вот с анонимностью запутался: если есть указатель-название, то тогда функция уже именованая?...

Цитата
Даже prototype.js сохраняет все параметры

По коду, вроде как, это только для IE сделано(unloadCache)...

Цитата
 Вот так, вкратце. Это, наверно, не совсем то, чтобы Вы надеялись узнать от меня. Ведь Вам вряд ли захочется браться за модификацию методов библиотеки - Event.unloadCache&Event.stopObserving... 

Не-не-не smile Может в следующий раз ;)

Еще раз спасибо.

Автор: Sardar 15.2.2007, 03:01
Цитата(izOne @  15.2.2007,  00:39 Найти цитируемый пост)
Только вот с анонимностью запутался: если есть указатель-название, то тогда функция уже именованая?

Ещё раз внимательно прочитать: в JS есть только переменные.
Всё остальное значения, функция в том числе.
Код
function test(a) { //эквивалентно var test = function(a) {...
    alert(a);
}

test("bla");
var b = test;
test = 90;
alert(test);
try {
    test("wow!");
} catch(e) {alert(e);}
b("ttt");

В итоге можно держать сколько угодно ссылок на значение-функции, имени как такового у неё нет. Перечитывать пост до полного просветления.

Автор: AKS 15.2.2007, 09:53
Цитата(izOne)
Только вот с анонимностью запутался...

Имя функции - это тот идентификатор, который может (опционально) быть указан после ключевого слова function. Если его нет - функция анонимная, и никакое присвоение не сделает ее именованной. Взглянув на пример Sardar'а, можно заметить следующее. Именованная функция function test (в данном случае это не эвивалент записи var test = function () ) создает одноименную переменную test. Эта переменная создается в том контексте, где была создана эта function declaration. Переменную test позже можно "забить" ("убить") чем-то другим (90, например). Но, сохранив ссылку на эту именованную функцию в b, мы по-прежнему имеем эту самую function test в памяти (вызовите alert(b) и Вы увидите ее сериализацию), и сохранится она в таком "неприкосновенном" виде до тех пор, пока будут существовать ссылки на этот объект function test.
Возвращаясь к нашему случаю, можно отметить еще кое-что. Несмотря на то, что функция будет находиться в массиве Event.observers, она как была анонимной, так по-прежнему будет оставаться таковой. И в нашем распоряжении нет ни идентификатора, которому оператор присвоения назначил бы ссылку на эту функцию, нет даже индекса, по которому мы бы могли ее отыскать в массиве. Так что, в-О-О-бще "полнейшая анонимность", чего уж тут вспоминать об именованности ;)...

Цитата(izOne)
только для IE сделано

Вот я о том и написал. Сделано только для события unload, а не иначе. Можно было бы вызывать этот метод из Event.stopObserving в том случае, если параметр observer не передан в stopObserving. В таком случае передав в Event.unloadCache ссылку на элемент и имя события можно было бы сделать то, о чем я уже написал. Но весомых аргументов для модификации нет, поскольку всегда есть возможность обойтись без этого (как Вы и сделали), присваивая заранее ссылки на функции.

Автор: Sardar 16.2.2007, 01:30
Цитата(AKS @  15.2.2007,  08:53 Найти цитируемый пост)
в данном случае это не эвивалент записи var test = function () 

Вывод на toString() это единственное где можно встретить былое "имя" функции. Более оно никак себя не проявляет. Если у тебя получается как то использовать этот факт, то вероятно понятия "анонимные" и "не анонимные" для тебя значимы. С практической точки зрения (и с реализации тоже) имени у функции нет (на toString видим часть исходника как он был захвачен, а не восстановленное в текст AST или байткод, отсюда имя сохраняется).

А вообще флейм пошёл  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)