как привязать метод в качестве обработчика событий

[Степан]

var MyDiv = function()
{
this.mdiv;
this.mx;
this.mcolor;
}

function createDiv(conter)
{
QallDiv = new Array(3);
for(i=0;i<3;i++){
QallDiv[i] = new MyDiv();

}
QallDiv[0].mcolor="#FF0000";
QallDiv[1].mcolor="#FF9900";
QallDiv[2].mcolor="#FFFF00";
for(i=0;i<3;i++)
{
QallDiv[i].mdiv = document.createElement("div");
QallDiv[i].mdiv = conter.appendChild(QallDiv[i].mdiv);
QallDiv[i].mdiv.innerHTML="Fuck";
if(i>0){
var ii = i-1;
}
else
{
ii=0
}
QallDiv[i].mx = QallDiv[ii].mx+10;
QallDiv[i].mdiv.style.width = 50 + "px";
QallDiv[i].mdiv.style.backgroundColor = QallDiv[i].mcolor;

}

return QallDiv;
}


Как должен выглядеть метод MyDiv (к примеру меняющий цвет фона документа в цвет записанный в переменной mcolor, и как его привязать ко всем экземплярам QallDiv) :help:

[Степан]

чтоб вас не загружать ответом, проясните вопрос покороче:

var MyDiv = function()
{
this.mdiv;
this.mx;
this.mcolor;
}

MyDiv.prototype.CHcolor = function(){
document.body.style.backgroundColor = "#CC9900";
}

function createDiv(conter)
{
QallDiv = new MyDiv();
QallDiv.mdiv = document.createElement("div");
QallDiv.mcolor="#FF0000";
QallDiv.mdiv = conter.appendChild(QallDiv.mdiv);
QallDiv.mdiv.innerHTML="Fuck";
QallDiv.mx = 10;
QallDiv.mdiv.style.width = 50 + "px";
QallDiv.mdiv.style.backgroundColor = QallDiv.mcolor;

QallDiv.mdiv.addEventListener("click",CHcolor,true); // ??????


return QallDiv;
}


Почему не работает и как будет правильно?

[Octane]

QallDiv.mdiv.addEventListener("click", QallDiv.CHcolor, true);

[Степан]

Спасибо огромное. заработало.:thanks:

А на какой объект будет ссылаться this. если ее использовать в методе. и потом метод запускать как обработчик события.

если написать таким образом то после события значение запишется в CHcolor экземпляра?

MyDiv.prototype.CHcolor = function(){
this.CHcolor = "Значение";
}

[Octane]

Контекст вызова (this) функции QallDiv.CHcolor будет ссылаться на QallDiv.mdiv, если QallDiv.CHcolor сработает по событию click на элементе QallDiv.mdiv.

[Степан]

спасибо за подробный ответ:thanks:

[Степан]

А как быть с массивом?

var MyDiv = function()
{
this.mdiv;
this.mx;
this.mcolor;
this.text;
}

MyDiv.prototype.CHcolor = function(i){
document.body.style.backgroundColor = QallDiv[i].mcolor;
}

function createDiv(conter)
{
var QallDiv = new Array(2);
for(i=0;i<2;i++){
QallDiv[i] = new MyDiv();
}

QallDiv[0].mcolor="#FF0000";
QallDiv[1].mcolor="#FF9900";
QallDiv[0].mx = 10;
QallDiv[1].mx = 60;

for(i=0;i<2;i++){
QallDiv[i].mdiv = document.createElement("div");
QallDiv[i].mdiv = conter.appendChild(QallDiv[i].mdiv);
QallDiv[i].mdiv.style.width = 50 + "px";
QallDiv[i].mdiv.style.position = "absolute";
QallDiv[i].mdiv.style.left = QallDiv[i].mx + "px";
QallDiv[i].mdiv.style.backgroundColor = QallDiv[i].mcolor;
QallDiv[i].text = document.createTextNode("FUCK");
QallDiv[i].text = QallDiv[i].mdiv.appendChild(QallDiv[i].text);
QallDiv[i].mdiv.addEventListener("click",QallDiv[i].CHcolor(i),true);
}
return QallDiv;
}



document.body.style.backgroundColor = QallDiv[i].mcolor; и можно както описать этот метод используя this, чтобы не привязываться к конкретному массиву?

[Степан]

ну кто-нибудь ответьте ПЛЗ :help:

[Степан]

Контекст вызова (this) функции QallDiv.CHcolor будет ссылаться на QallDiv.mdiv, если QallDiv.CHcolor сработает по событию click на элементе QallDiv.mdiv.

в общем таким образом имея ссылку на параметр экземпляра объекта можно получить ссылку на сам экземпляр объекта?

QallDiv[i].mdiv.addEventListener("click",QallDiv[i].CHcolor(i),true); - почему это не работает? В книге пока не могу найти ответ...:cray:

[Octane]

в общем таким образом имея ссылку на параметр экземпляра объекта можно получить ссылку на сам экземпляр объекта?
Нет. На один и тот же элемент mdiv может существовать одновременно множество ссылок.

почему это не работает?
Вы выполняете метод CHcolor, который ничего не возвращает, а точнее возвращает undefined, поэтому ваш код равносилен следующему:
QallDiv[i].mdiv.addEventListener("click", undefined, true);
Воспользуйтесь замыканием (http://javascript.ru/basic/closure) для доступа к параметрам.