Adicionando ao evento, funcao da propria classe

[ScornInPC 1]

ola pessoal, to precisando adicionar a um evento, uma função da propria classe, algo assim

 

/* * SimpleGrid v0.2 codado por Bruno Pitteli Gonçalves <scorninpc@gmail.com> * Script para estudo ou implementação. * Qualquer modificação, idéia, ou até mesmo critica, <scorninpc@gmail.com> * Use por sua responsabilidade *//* * Classe que desenha e manipula tabela (grid) * @name SimpleGrid * @param *	NomeDiv - Nome do div onde será uma tabela * @return none */function SimpleGrid(NomeDiv) {	this.LinhasTotal = 0; // QUantidade de cadastros	this.ColunasTotal = 0; // Quantidade de colunas	this.IndexSelecionado = null; // O index da linha selecionada		this.ColunasNome = NomeDiv + "_colunas"; // Nome do div onde fica as colunas	this.LinhasNome = NomeDiv + "_linhas"; // Nome do div onde fica os registros	this.MatrizTabela = new Array(); // Matriz "copia" da tabela	this.ColunasTamanho = new Array(); // Vetor com o tamanho de cada coluna	this.ColunasAlinhamento = new Array(); // Vetor com o alinhamento de cada coluna	this.areaTabela = document.getElementById(NomeDiv); // Objeto do div onde esta a tabela	this.areaTabela.innerHTML = "<div id='" + this.ColunasNome + "'></div><div id='" + this.LinhasNome + "'></div>";		this.areaColunas = document.getElementById(this.ColunasNome); // Objeto do div onde esta as colunas	this.areaColunas.innerHTML = "<div class=\"grid_top_border\" style=\"width: 40px;\"> </div>";		this.areaColunas.style.display = "list-item";		this.areaLinhas = document.getElementById(this.LinhasNome); // Objeto do div onde esta as linhas	/*	 * Metodo que adiciona uma coluna na tabela	 * @name addColuna	 * @param	 *	nome - O texto que aparecerá na coluna	 *	tamanho - O largura em px da coluna	 *	alinhamento - O alinhamento do texto no titulo da coluna	 *	alinhamento_dados - O alinhamento nos dados da coluna	 * @return none	 */	this.addColuna = function (nome, tamanho, alinhamento, alinhamento_dados) {		this.MatrizTabela[0] = new Array();		this.MatrizTabela[0][this.ColunasTotal] = nome;		this.ColunasTamanho[this.ColunasTotal] = tamanho;		this.ColunasAlinhamento[this.ColunasTotal] = alinhamento_dados;				this.areaColunas.innerHTML += "<div class=\"grid_separator_top_border\"> </div>";		this.areaColunas.innerHTML += "<div class=\"grid_top_border\" align=\"" + alinhamento + "\" style=\"width:" + tamanho + "px\"> " + nome + " </div>";		this.ColunasTamanho[this.ColunasTotal] = tamanho;		this.ColunasTotal++;	};		/*	 * Metodo que adiciona registros na tabela	 * @name addRegistro	 * @param	 *	dados - Array com os dados em ordem	 * @return none	 */	this.addRegistro = function (dados) {		var LinhaNome = this.LinhasNome + "_linha_" + this.LinhasTotal;		this.areaLinhas.innerHTML += "<div id=\"" + LinhaNome + "\" class=\"grid_new_line\"><div class=\"grid_left_border\">" + (this.LinhasTotal + 1) + "</div></div>";				var areaLinha = document.getElementById(LinhaNome);		//areaLinha.onclick = this.trocarCor(this.LinhasTotal, "#000000"); 		for (i=0; i<this.ColunasTotal; i++) {			if ((dados[i] == null) || (dados[i] == "undefined")) {				dados[i] = "";			}			areaLinha.innerHTML += "<div class=\"grid_linhas\" id=\"" + LinhaNome + "_" + i + "\" align=\"" + this.ColunasAlinhamento[i] + "\" style=\"width:" + this.ColunasTamanho[i] + "px\"> " + dados[i] + " </div>";				}		this.LinhasTotal++;	};		/*	 * Metodo que troca a cor de uma linha inteira	 * @name trocarCor	 * @param	 *	  linha - Numero da linha a ser trocada a cor	 *	  cor - Cor que a linha ficará	 * @return none	 */		this.trocarCor = function (linha, cor) {		if (linha != this.IndexSelecionado) {			for (i=0; i<this.ColunasTotal; i++) {				var areaImagem = document.getElementById(this.LinhasNome + "_linha_" + linha + "_" + i);				areaImagem.style.backgroundColor = cor;			}		}	};}

na função this.addRegistro, to tentando colocar na div o evendo onclick, quando o usuario clicar, troca a cor, mais nuam vai, ja fiz tanta coisa que naum sei explicar, alguem sabe onde errei? o que to fazendo errado?

 

ps: a linha onde to tentando fazer isso ta comentada

[Fleury 3]

//areaLinha.onclick = this.trocarCor(this.LinhasTotal, "#000000");

Cara, isso realmente é um problema -.-Te digo pq já passei e passo por isso até hoje.Acontece que quando você faz essa atribuição no onclick, temos isso aqui na propriedade onclick do seu objeto:

function(event) {  this.trocarCor(this.LinhasTotal, "#000000");}

Então o que acontece é que o this está chamando a função trocarCor da sua linha de registro e não do seu objeto JS instanciado, pois o this faz referência ao escopo do objeto principal, que é o objeto DIV HTML Element.Se você colocar no lugar do this, o nome da instância do seu objeto, irá funcionar, mas, sua classe deixa de ser genérica. Realmente uma POG.Procuro solução pra isso até hoje. Quem sabe alguém já não conseguiu outra solução né!? :]Abraços,F.

[Fleury 3]

Fiquei martelando aqui e achei umas coisas bem interessantes ;]

 

Meu teste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Teste de Classe</title><script>function jsButton() {	var millisec = new Date().getMilliseconds(); // Variável privada	this.randomNum = Math.random();			 // Variável pública		var publicRandomNum = this.randomNum;  // Variável privada com conteúdo da pública O.o	this.draw = function() {		var name	= (typeof arguments[0] == "string" ? arguments[0] : "");		var caption = (typeof arguments[1] == "string" ? arguments[1] : "");		document.write('<button id="' + name + '">' + caption + '</button>');		document.getElementById(name).onclick = this.onclickevt;	}		this.onclickevt = function() {		alert("var millisec: " + millisec + 			  "\nthis.randomNum: " + this.randomNum + 			  "\npublicRandomNum: " + publicRandomNum);	}}</script></head><body><script>var meuBotao = new jsButton();meuBotao.draw("botaoTeste","Testar!");alert("document.getElementById('botaoTeste').onclick = " + document.getElementById("botaoTeste").onclick);alert("millisec: " + millisec);</script></body></html>

Conclusão:

Ao aplicar a função ao evento onclick do objeto, as variáveis privadas da classe conseguiram ser lidas enquanto a pública passou a se referir ao elemento do botão

Vejamos se alguém pode contribuir mais com essa solução

[Fleury 3]

Só do alert da descrição do onclick ou tinha outro?

[ScornInPC 1]

beleza, pelo que entendi, vo ter que colocar o evento, não no meu objeto, e sim na pagina que eu usar o objeto?se for isso, naum serviu não =(. A parte da explicação no 1° posta ta beleza, era isso mesmo que eu achei, estava pensando em algum método que retornasse o nome do objeto criado =D, seria tão facil se JS tivesse isso =D