ＤＯＭの中で関数に引数を渡す方法

[新着] Webテンプレートを仮オープンしました

0   名前： レザー ： 2006/09/22（金） 23:12  ID:UzdqIW6b
おはようございます。

IE6.0です。
javascriptからDOMを操作してテーブル列を増やしています。
その列をクリックすると、色が黄色になるというものを作っています。

その中で、onclickに関数をセットしたいのですが、その関数は引数をとらないと動かないため、引数を渡したいのですが、どうすれば良いでしょうか？

分かりにくいので下にソースを書きます。

//ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<script type="text/javascript">
<!--

var history;

function heighlight(elem){

document.getElementById(elem).style.backgroundColor='gold';
if(history != null){
document.getElementById(history).style.backgroundColor='white';
}
history = elem;
}

function putDom(){

var tr = document.createElement('tr');
var ids = '123_tr';
tr.id = ids;
var td = document.createElement('td');
td.innerHTML = "ヒャダイン";

tr.appendChild(td);
var tbd = document.getElementById("tbd1");
tbd.appendChild(tr);

tr.onclick=heighlight;
}
//-->
</script>
<title></title>
</head>
<body>
<a href="#" onclick="putDom()" >onclick</a>
<table summary="onclick" id="tbl1" border="1">
<tbody id="tbd1">
<tr id="tr1" onClick="heighlight(this.id)">
<td>ヒャド</td>
<td>メラ</td>
<td>イオ</td>
<td>バギ</td>
</tr>
</tbody>
</table>
</body>
</html>

//以上

tr.onclick=heighlight;の部分です。
よろしくお願いします。
1   名前： NullPo ： 2006/09/22（金） 23:12  ID:Z0FHbpib
こんな感じでしょうか。
<script type="text/javascript">
<!--

var history;

function heighlight(elem) {

  elem.style.backgroundColor = 'gold';

  if(history != null) {
    history.style.backgroundColor = 'white';
  }

  history = elem;
}

function putDom() {

  var tr = document.createElement('tr');
  var ids = '123_tr';
  tr.id = ids;
  var td = document.createElement('td');
  td.innerHTML = "ヒャダイン";

  tr.appendChild(td);
  var tbd = document.getElementById("tbd1");
  tbd.appendChild(tr);

  tr.onclick = function(){heighlight(tr);};
}

//-->
</script>

2   名前： レザー ： 2006/09/22（金） 23:12  ID:elQ/0TlY
どうも、ありがとうございます。

この場合、列が増えていくにしたがって、function分、メモリを食っていくのでしょうか？

でも仮に、メモリ使ったとしても、こういう方法しか無いなら、これで行くしかないですよね。
3   名前： NullPo ： 2006/09/22（金） 23:12  ID:Z0FHbpib
>>2
どれくらいメモリ食うか試したことはないです。
  tr.onclick = function(){heighlight(this);};

これでもいいですね。
こっちのほうがいいのかな。
4   名前： 牛若 ： 2006/09/22（金） 23:12  ID:8dI6LIcS
老婆心ながら、そのidのつけ方はいただけませんぜ。
5   名前： レザー ： 2006/09/22（金） 23:12  ID:elQ/0TlY
＞老婆心ながら、そのidのつけ方はいただけませんぜ。

ありがとうございます。

同じIDが複数になるということは問題ですよね。

＞＞ var ids = '123_tr';
　　tr.id = ids;

も、あまりきれいで無かったです。
6   名前： 牛若 ： 2006/09/22（金） 23:12  ID:8dI6LIcS
>>5
いやいや。それも問題ながら、IDの命名法に違反してます、ってことが言いたかった
ことです。ことば足らずですんません。
7   名前： 匿名 ： 2006/09/22（金） 23:12  ID:i4s77xzC
そのつど無名関数を作れば多少はメモリを食う。
通常は無視できる程度とは思うが、
実は>>1だとIEがメモリリークを起こす可能性がある。
（「IE メモリリーク 循環参照」で検索してみるといい）

IE以外ではイベントハンドラにイベントオブジェクトが渡されるし
IEはグローバルな event オブジェクトを持っているから
通常はイベントオブジェクトから各種の情報を引き出す。
だからidを渡す必要などない。もっとも分岐が面倒だが。

function heighlight(event){
    var elem = event ? event.target : window.event.srcElement;
    elem.style.backgroundColor='gold';
}

tr.onclick=heighlight;


>>5
idはアルファベット（A-Za-z）で始まらねばならない。
8   名前： NullPo ： 2006/09/22（金） 23:12  ID:1Bb3RL38
>>7
＞実は>>1だとIEがメモリリークを起こす可能性がある。
勉強になりました、ありがとうございます。


>>2
正直、そんなメモリくうわけないじゃんとタカをくくっていましたが、
心配していたのはそういうことだったのですね。
>>1のコードで満足いかないのは当然ですね、大変失礼しました。
9   名前： サリー ： 2006/09/22（金） 23:12  ID:UzdqIW6b
こちらもありがとうございました。

勉強になりました。
＞idはアルファベット（A-Za-z）で始まらねばならない。
数字でも動いたので、気にしてませんでした。そうなんですね。。。

実は>>1だとIEがメモリリークを起こす可能性がある。

この場合は、循環参照は、onclickを実行するたびに、参照が増えるんですか？
関数が作られたときに参照が張られるだけなら、じょじょにメモリが少なくなるというのがぴんとこないんですが。

それとも無名関数の場合は、onclickの時に関数が作られて、その都度参照が発生するから、循環参照だとメモリリークになるって感じですかねえ。

いずれにせよ考えてなかったから勉強になりますです。

一覧へ戻る