12

24x60のテーブルを作成するための小さなコードを開発しました。<td>それぞれのIDを印刷したいmouseover：

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
    background-color:blue;
}
td {
    width: 2px;
    height: 2px;
    background-color:red;
}
</style>
</head>
<body>
<table id="time-table"></table>
<script type="text/javascript">
var table = document.getElementById( "time-table" );
for ( var r = 0; r < 24; r++ ) {
    var row = document.createElement( "tr" );
    for ( var c = 0; c < 60; c++ ) {
        var td = document.createElement( "td" );
        td.id = "td-" + r + "-" + c;
        td.onmouseover = function ( e ) {
            console.log( this.id );
        }
        row.appendChild( td );
    }
    table.appendChild( row );
}
</script>
</body>
</html>

コードは機能しますが、最適化されているかどうか心配ですか？ネストされたループで1440イベント処理関数を作成していますか？または、JavaScriptインタープリターは、1つの関数のみを作成し、それを1440<td>要素に割り当てるのに十分スマートですか？

4

4 に答える 4

12

いいえ、JavaScriptは最適化を行いません（まあ、いくつかの実装は最適化するかもしれませんが、それに依存するべきではありません）。あなたは本当に多くの関数を作成しています。

関数を一度定義して再利用することをお勧めします。

var handler = function() {
    console.log(this.id);
}

for ( var r = 0; r < 24; r++ ) {
    var row = document.createElement( "tr" );
    for ( var c = 0; c < 60; c++ ) {
        var td = document.createElement( "td" );
        td.id = "td-" + r + "-" + c;
        td.onmouseover = handler;
        row.appendChild( td );
    }
    table.appendChild( row );
}

または、イベントの委任を使用することを検討してください。つまり、ハンドラーをセルの祖先にバインドします。

table.onmouseover = function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;

    if(target.nodeName === 'TD') {
        console.log(target.id);
    }
};

イベントがDOMツリーをバブルアップし、一部のブラウザーではパフォーマンスの面でさらに優れている可能性があるため、これは機能します。

イベント処理について学ぶための良いリソースは、quirksmode.orgの記事です。

于 2012-05-22T20:15:30.670 に答える
1

安全のために、小さな変更を加えます。

var myFunc = function (e) {
    console.log( this.id );
};

var table = document.getElementById( "time-table" );
for ( var r = 0; r < 24; r++ ) {
    var row = document.createElement( "tr" );
    for ( var c = 0; c < 60; c++ ) {
        var td = document.createElement( "td" );
        td.id = "td-" + r + "-" + c;
        td.onmouseover = myFunc;
        row.appendChild( td );
    }
    table.appendChild( row );
}
于 2012-05-22T20:15:37.453 に答える
1

テーブルに1つのイベントハンドラーを配置し、イベントバブリングを使用して1つの場所で処理することをお勧めします。

var table = document.getElementById( "time-table" );
for ( var r = 0; r < 24; r++ ) {
    var row = document.createElement( "tr" );
    for ( var c = 0; c < 60; c++ ) {
        var td = document.createElement( "td" );
        td.id = "td-" + r + "-" + c;
        row.appendChild( td );
    }
    table.appendChild( row );
}
table.addEventListener('mouseover', function(e) {
    console.log(e.target.id);
}, false);

IEの古いバージョンでは、addEventListenerの代わりにattachEventを使用します。

于 2012-05-22T20:18:29.963 に答える
1

はい、そこにあるすべての要素に名前のない関数を定義しますが、ループの外側で関数を定義して参照するだけで済みます。

var printMyId = function(e) {
  console.log(e.srcElement.id);
};
var table = document.getElementById("time-table");
for (var r = 0; r < 24; r++) {
  var row = document.createElement("tr");
  for (var c = 0; c < 60; c++) {
    var td = document.createElement("td");
    td.id = "td-" + r + "-" + c;
    td.onmouseover = printMyId;
    row.appendChild(td);
  }
  table.appendChild(row);
}
于 2012-05-22T20:19:46.627 に答える