Полезная информация

Список ответов на каверзные вопросы можно получить в FAQ-разделе форума.

№113-08-2007 11:02:09

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

обработка событий. addEventListener

Необходимо написать небольшой редактор через desigmMode.

Необходимо отслеживать нажатие кнопок(картинок), прикрепляю обработчики через addEventListener но не работает. FireBug никаких сообщений об ошибке не выдает.

Вот исходниый код:

Выделить код

Код:

function jsEditor(name, content, height, width) 
{
    this.name    = name;
    this.content = content;
    this.height  = height;
    this.width   = width;
    this.create();
}

jsEditor.prototype = {
    
    executeAction : function() 
    {
        var div = document.getElementById("msg");
        div.innerHTML = "asdasdasd";
    },
    
    createToolbarFromArray : function(arrayToolbar) 
    {
        var toolbar = document.createElement("div");
        for (i in arrayToolbar) 
        {
            var image  = document.createElement("img");
            image.setAttribute("id", arrayToolbar[i][1] + "-button");
            image.setAttribute("src", "styles/img/jseditor/" + arrayToolbar[i][2]);

            image.addEventListener("click", this.executeAction, false); // прикрепляем обработчик

            toolbar.appendChild(image);
        }
        return toolbar;
    },
    
    createToolbar : function() 
    {
        var arrayFontStyleToolbar =
        [
            ['Калын',         'Bold',          'bold.png'],
            ['Курсив',        'Italic',        'italic.png'],
            ['Подчеркнытый',  'Underline',     'underline.png'],
            ['Перечеркнутый', 'StrikeThrough', 'strike-through.png'] 
        ];
        var arrayAdditionalToolbar =
        [
            ['Рәсем куярга',  'InsertImage',   'insert-image.png']
        ];
        return this.createToolbarFromArray(arrayFontStyleToolbar);
    },
    
    create : function() 
    {
        var table = document.createElement("table");
        
        table.setAttribute("id", this.name + "-conteiner");
        
        var rowToolbar = table.insertRow(0);
        var cellToolbar = rowToolbar.insertCell(0);
        cellToolbar.appendChild(this.createToolbar());
        
        var conteiner = document.createElement("div");
        conteiner.appendChild(table);
        document.open();
        document.write(conteiner.innerHTML);
        document.close();
    }
}

Где ошибка не могу понять:(

Всем заранее спасибо!


Наши знания делают нас уникальными.

Отсутствует

 

№213-08-2007 12:39:05

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 2.0

Re: обработка событий. addEventListener

подозреваю, что в месте вызова this. уже е тот объект.
попробуйте:

Выделить код

Код:

image.addEventListener("click", jsEditor.executeAction, false);

Отсутствует

 

№313-08-2007 13:15:04

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

Re: обработка событий. addEventListener

Выводит ошибку :

Выделить код

Код:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///home/almaz/proj/jseditor/jseditor.js :: anonymous :: line 27" data: no]

Даже так не помогает

Выделить код

Код:

image.addEventListener("click", jsEditor.prototype.executeAction, false);

Наши знания делают нас уникальными.

Отсутствует

 

№413-08-2007 13:21:48

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: обработка событий. addEventListener

lycan
а create кто будет вызывать? :)
может быть лучше написать с использованием класса?

Отсутствует

 

№513-08-2007 13:34:13

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

Re: обработка событий. addEventListener

Так он же вызывается

Выделить код

Код:

this.create();

Если ты о том.


Наши знания делают нас уникальными.

Отсутствует

 

№613-08-2007 13:38:50

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: обработка событий. addEventListener

lycan
он вызывается при создании обьекта, но когда вызывается обработчик этого объекта (там уже наверное оверлей другой), jsEditor - не инициализирован.

тогда уж лучше вынести обработчик за пределы jsEditor, либо сделать так:

Выделить код

Код:

image.addEventListener("click", document.getElementById("msg")innerHTML = "asdasdasd";, false);

Отсутствует

 

№713-08-2007 14:09:08

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

Re: обработка событий. addEventListener

Вышеуказанным методом не получается, выводит ту же ошибку NS_ERROR_XPC_BAD_CONVERT_JS, и обработчик я выносил за пределы jsEditor, не помогает.


Наши знания делают нас уникальными.

Отсутствует

 

№813-08-2007 14:14:59

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: обработка событий. addEventListener

lycan

Выделить код

Код:

image.addEventListener("click", function() {
  document.getElementById("msg")innerHTML = "asdasdasd";
}, false);

Отсутствует

 

№913-08-2007 14:18:46

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

Re: обработка событий. addEventListener

не работает, даже так :

Выделить код

Код:

image.onclick = function() {
                document.getElementById("msg").innerHTML = "asdasdasd";
            };

Наши знания делают нас уникальными.

Отсутствует

 

№1013-08-2007 14:23:34

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: обработка событий. addEventListener

lycan
а если вместо

Выделить код

Код:

document.getElementById("msg").innerHTML = "asdasdasd";

что нибудь типа

Выделить код

Код:

alert(0);

попробовать? вроде всё правильно...

Отсутствует

 

№1113-08-2007 14:30:55

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

Re: обработка событий. addEventListener

Глухо:(

Добавлено Пнд 13 Авг 2007 14:47:12 :
Решилось для

Выделить код

Код:

<script type="text/javascript">
function TFoo() {

}
TFoo.prototype = {

  init : function()
  {
    var div = document.body;
    div.addEventListener("click", TFoo.prototype.load, false);
  },
  
  load : function()
  {
    alert("hello");  
  }
  
};

foo = new TFoo();

foo.init();
</script>

пашет скомпоную под неё. Спасибо!!!


Наши знания делают нас уникальными.

Отсутствует

 

№1213-08-2007 15:15:48

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Iceweasel 2.0

Re: обработка событий. addEventListener

Рещил проблема была в

Выделить код

Код:

document.open();
        document.write(conteiner.innerHTML);
        document.close();

заменил на

Выделить код

Код:

document.body.insertBefore(conteiner, null);

Наши знания делают нас уникальными.

Отсутствует

 

№1313-08-2007 15:30:57

Anton
Участник
 
Группа: Extensions
Откуда: от верблюда
Зарегистрирован: 14-12-2004
Сообщений: 3057
UA: Firefox 2.0
Веб-сайт

Re: обработка событий. addEventListener

lycan
Не очень правильное решение. Работать будет только одна кнопка, this будет указывать не на экземпляр jsEditor. Здесь нужен bind.

Отредактировано Anton (13-08-2007 15:44:18)


Время настанет, время придет...
И лис кОнкурiентов на части порвет !!!

Отсутствует

 

№1414-08-2007 16:25:24

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Firefox 2.0

Re: обработка событий. addEventListener

Да действительно работает толко одна кнопка. Здесь http://xpoint.ru/know-how/JavaScript/Po … DlyaCallba приведен пример передачи одного параметра, как можно реализовать передачу двух или болле, пробовал так

Выделить код

Код:

jsEditor.prototype = {
    executeAction : function(action) 
    {
        alert("instance : " + this.name + ", action : " + action);
    },

    createToolbarFromArray : function(toolbarCell, arrayToolbar) 
    {
        var instanceName = this.name;
        for (i in arrayToolbar)
        {
            var image = document.createElement("img");
            image.setAttribute("src", jsEditorPathImg + arrayToolbar[i][2]);
            image.setAttribute("class", "jseditor-button");
            image.onclick = function(action)
            {
                this.executeAction(action);
            }.bind(this, arrayToolbar[i][1]);
            
            image.onmouseover = function()
            {
                this.id = "js-button-selected";
            }
            image.onmouseout = function()
            {
                this.id = "";
            }
            toolbarCell.appendChild(image);
        }
    },
.........................

alert выдает : "instance : js_editor, action : [object MouseEvent]

Добавлено Втр 14 Авг 2007 16:50:48 :
Все получилось: вместо this создал новый объект и передал его bind().
Спасибо!!


Наши знания делают нас уникальными.

Отсутствует

 

№1515-08-2007 15:08:07

Anton
Участник
 
Группа: Extensions
Откуда: от верблюда
Зарегистрирован: 14-12-2004
Сообщений: 3057
UA: Firefox 2.0
Веб-сайт

Re: обработка событий. addEventListener

lycan пишет

...Здесь http://xpoint.ru/know-how/JavaScript/Po … DlyaCallba приведен пример передачи одного параметра, как можно реализовать передачу двух или болле...

Под передачей параметра там имеется в виду установка нужного значения this, а не передача аргументов. executeAction - это обработчик события, он должен по передаваемому ему в качестве аргумент событию разбираться, что делать дальше.

...Все получилось: вместо this создал новый объект и передал его bind().

Я надеюсь, не класса jsEditor. И куда теперь указывает this в executeAction ? - в этот самый новый объект. Насколько я понимаю, требовалось, чтобы this указывал на экземпляр jsEditor, который ставил обработчик.

Добавлено Срд 15 Авг 2007 15:15:59 :
Вот для иллюстрации обоих с моей точки зрения неправильностей: http://pastebin.mozilla-russia.org/90016, http://pastebin.mozilla-russia.org/90017


Время настанет, время придет...
И лис кОнкурiентов на части порвет !!!

Отсутствует

 

№1617-08-2007 09:55:42

lycan
Участник
 
Группа: Members
Зарегистрирован: 13-08-2007
Сообщений: 12
UA: Firefox 2.0

Re: обработка событий. addEventListener

Anton
Не очень красиво но заработало

Выделить код

Код:

image.onclick = function()
            {
                this["instance"].executeAction(this["action"]);
            }.bind(new myObject({ instance : this, action : arrayToolbar[i][1] }));

Наши знания делают нас уникальными.

Отсутствует

 

№1717-08-2007 15:10:36

Anton
Участник
 
Группа: Extensions
Откуда: от верблюда
Зарегистрирован: 14-12-2004
Сообщений: 3057
UA: Firefox 2.0
Веб-сайт

Re: обработка событий. addEventListener

lycan пишет

...заработало

Выделить код

Код:

...
            ...
            ...bind(new myObject(...

Это понятно. Просто, помнится, хотелся указатель на другой объект, а сейчас вместо "чистого" this'а this.instance.


Время настанет, время придет...
И лис кОнкурiентов на части порвет !!!

Отсутствует

 

№1809-02-2008 16:35:30

Anton
Участник
 
Группа: Extensions
Откуда: от верблюда
Зарегистрирован: 14-12-2004
Сообщений: 3057
UA: Firefox 2.0
Веб-сайт

Re: обработка событий. addEventListener

Нашёл сегодня здесь: http://developer.mozilla.org/en/docs/Co … od_binding ещё один способ получения правильного this в обработчиках событий. Надо, чтобы объект реализовал интерфейс EventListener, т. е., просто надо объекту добавить метод handleEvent:

Выделить код

Код:

var obj =
{
    ...
    handleEvent: function (event)
    {
        ...
    },
    ...
};
window. addEventListener ("...", obj, ...);

Время настанет, время придет...
И лис кОнкурiентов на части порвет !!!

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]