0

.pieceDOM がロードされた後に div が作成された場合でも、マウス イベントをクラスに追加したいと考えています。

これが私の実際のループです：

var piece = document.getElementsByClassName('piece');

function theLoop() {
  for(var i=0; i<piece.length; i++) {
    piece[i].addEventListener("mousemove", function(event) {
      //do stuff
    }
  }
}

theLoop();

正常に動作しますが、DOM がロードされた後にクラスに新しい div を追加すると.piece、ループはそれらを無視します。

.cloneNode()次のように、これらの新しい div をandで追加し.appendChild()ます。

function createPiece(symbol, name) {
  var clone = document.getElementById(symbol).cloneNode(true);
  clone.setAttribute('id',symbol+'-'+name);
  document.getElementById(name).appendChild(clone);
}

createPiece(symbol, name);

元の複製されたすべての div には class があり.pieceます。

これらの新しい div を for ループに追加し、マウス イベントを関連付けるにはどうすればよいですか?

ありがとう。

4

3 に答える 3

2

ループがページの読み込み時に実行される場合、後で動的に DOM に追加された要素を考慮に入れることはできません。通常、イベントの委譲は解決策ですが、イベントには適切な解決策ではありませんmousemove(頻繁に発生するため)。

できることは、渡された要素にイベント ハンドラーを追加する関数を作成することです。次に、現在のループからその関数を呼び出し、新しい要素を DOM に追加するたびにもう一度呼び出すことができます。

于 2012-10-18T00:27:42.260 に答える
2

すべてのピースの共通の親に mousemove イベント ハンドラーを配置e.targetし、イベント データ構造を調べて、イベントが実際に発生したピースを確認します。

これは委任されたイベント処理と呼ばれ、静的な親に 1 つのイベント ハンドラーをインストールするだけで、後で動的に追加された子も含め、すべての子からイベントを取得できます。

他の唯一のオプションは、後でページに追加されるときに、特定の各部分にイベント ハンドラーをインストールすることです。要素をページに追加する実際のコードからこれをトリガーする必要があります。これは、DOM の変更を監視するための十分にサポートされたクロスブラウザーの方法がないためです。このようにする場合、同じ関数を複数の場所で使用できるように、イベント処理関数を (現在使用している無名関数ではなく) 名前付き関数にする必要があります。

于 2012-10-18T00:27:52.313 に答える
1

新しく作成された要素のループは必要ありません。また、イベント委任も必要ありません(便利な場合もあります)。

ハンドラを名前付き関数にして、複製時にバインドするだけです。

var piece = document.getElementsByClassName('piece');

function pieceHandler(event) {
  //do stuff
}

function theLoop() {
  for(var i=0; i<piece.length; i++) {
    piece[i].addEventListener("mousemove", pieceHandler, false)
  }
}

theLoop();

function createPiece(symbol, name) {
    var clone = document.getElementById(symbol).cloneNode(true);
    clone.addEventListener("mousemove", pieceHandler, false); // assign handler
    clone.setAttribute('id',symbol+'-'+name);
    document.getElementById(name).appendChild(clone);
}

createPiece(symbol, name);
于 2012-10-18T00:36:13.537 に答える