2

次のような関数があるとします。

document.someElement.click = function(){alert(555);}

someElementHTMLページ自体の要素にないのでsomeElement、ページに追加した後、前のコードは機能しません。

(新しい)動的に追加されたHTML要素にイベントリスナーを追加する最良の方法は何ですか?

4

2 に答える 2

4

ここには 2 つの一般的な戦略があります。

  1. 要素を DOM に追加した後、要素にイベントをフックします。

  2. イベント委任を使用します。

1 つ目はかなり単純なので、2 つ目に焦点を当てます。

イベント委譲の考え方は、ほとんどの DOM イベントは、発生した要素からドキュメントまで「バブル」し、任意のレベルで処理できるというものです。

たとえば、あなたが持っているとします

<div id="container">
</div>

コンテナ div でイベントをフックできclickます。次に、次のようにすると:

var span = document.createElement('span');
span.innerHTML = "Hi there";
document.getElementById("container").appendChild(span);

...次に、 をクリックするspanと、イベントがコンテナーにバブルアップし、コンテナーのclickハンドラーでクリックが表示されます。

targetオブジェクトのプロパティを使用して、どの要素がイベントを開始したかを知ることができeventます。

次に例を示します。

HTML:

<button id="theButton">Click To Add</button>
<div id="container"></div>

JavaScript:

// Note that this code is at the end of the document
(function() {
  var container = document.getElementById("container");

  // Hook clicks on the button
  document.getElementById("theButton").onclick = buttonClick;

  // Hook clicks on the container
  container.onclick = containerClick;

  // Handle button clicks
  function buttonClick() {
    var child = document.createElement('div');
    child.id = ('d' + container.childNodes.length) +
      Math.floor(Math.random() * 10000);
    child.innerHTML = "I'm child div '" + child.id + "'";
    container.appendChild(child);
  }

  // Handle container clicks
  function containerClick(event) {
    event = event || window.event;

    alert("You clicked child '" + event.target.id + "'");
  }

})();

実例| ソース

注: 私はonclick物事をシンプルに保つために使用してきました。本番環境では、addEventListener(またはattachEventIE で) を使用することをお勧めします。実際、私は通常、jQuery、YUI、Closure、またはそれらが提供する重要なユーティリティ機能 ( /のスムージングを含む) のために他のいくつかのいずれかのような優れたライブラリを使用することをお勧めします。addEventListenerattachEvent

于 2012-12-22T08:06:53.463 に答える
2

addEventListener()( IE の場合) を使用attachEvent()して、新しく作成された要素にクリック ハンドラーを登録できます。次に例を示します。

var x = document.createElement('div');
x.innerText = 'click me';

x.addEventListener('click', function() {
  alert('i am clicked');
});

document.body.appendChild(x);

デモ

アップデート

TJの答えを見てください。彼は基本的に、クリック ハンドラーを定義するコンテナーをセットアップできると言っています。内部に追加されたすべての要素は、そのイベントをコンテナーにバブルアップさせます。このように、要素ごとに 1 つではなく、1 つのクリック ハンドラーのみが必要です。

于 2012-12-22T08:05:42.723 に答える