web-dev-qa-db-ja.com

動的に作成された要素にイベントリスナーを追加する

動的に生成されたすべての要素にイベントリスナー（Javascript）を追加できますか？私はページの所有者ではないため、静的な方法でリスナーを追加することはできません。

ページのロード時に作成されたすべての要素について、私は次を使用します。

doc.body.addEventListener('click', function(e){
//my code
},true);

ページに新しい要素が表示されたときにこのコードを呼び出すメソッドが必要ですが、jQueryを使用できません（プロジェクトでデリゲート、オンなどが機能しません）。これどうやってするの？

javascriptaddeventlistenerdom-eventsintercept
42
jenjis

図書館に戻ることなく、委任戦略を追求する必要があるようです。 Fiddle here： http://jsfiddle.net/founddrama/ggMUn/ にサンプルコードを投稿しました

その要点は、targetオブジェクトのeventを使用して、関心のある要素を探し、それに応じて応答することです。何かのようなもの：

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

CAVEATS！例Fiddleには、標準に準拠したブラウザ（IE9 +など）のコードのみが含まれます他の全員のバージョン）「古いIE」attachEventをサポートする必要がある場合は、適切なネイティブ関数の周りに独自のカスタムラッパーも提供する必要があります（これについては多くの良い議論があります） ; Nicholas Zakasが彼の本で提供しているソリューションが気に入っていますWeb開発者向けのプロフェッショナルなJavaScript。）

73
founddrama

新しい要素を追加する方法に依存します。

createElementを使用して追加する場合、これを試すことができます：

_var btn = document.createElement("button");
btn.addEventListener('click', masterEventHandler, false);
document.body.appendChild(btn);
_

その後、masterEventHandler()を使用してすべてのクリックを処理できます。

12
ATOzTOA

jQuery.on()に似た、動的イベントリスナーを追加する小さな関数を作成しました。

Element.matches()メソッドを使用してターゲットが指定されたセレクター文字列と一致するかどうかを確認するだけで、受け入れられた答えと同じ考え方を使用します。

addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});

githubから の場合に取得できます。

1
Cristy

event.target.classList.contains('someClass')で動的に作成されたHTMLelementsへの匿名タスクの委任

  1. trueまたはfalseを返します

  2. 例えば。 let myEvnt = document.createElement('span');myEvnt.setAttribute('class', 'someClass');myEvnt.addEventListener('click', e => {if(event.target.classList.contains('someClass')){console.log(${event.currentTarget.classList})}})

  3. 参照： https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-Vanilla-js/

  4. グッドリード： https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
  5. MDN： https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
  6. 挿入ポイント：
0
Vipul Anand

ここで注目に値する不明瞭な問題は、私が今発見したこの事実かもしれません：

要素にz-indexが-1以下に設定されている場合、実際にはそうであるにもかかわらず、リスナーはバインドされていないと思われるかもしれませんが、ブラウザはより高いz-index素子。

この場合の問題は、リスナーがバインドされていないことではなく、他の何か（たとえば、隠された要素）が要素の上にあるため、フォーカスを取得できないことです。代わりにフォーカスを取得します（つまり、イベントはトリガーされていません）。幸いなことに、要素を右クリックして「検査」を選択し、クリックしたものが「検査中」かどうかを確認することで、これを簡単に検出できます。

私はChromeを使用していますが、他のブラウザーがそれほど影響を受けているかどうかわかりません。しかし、機能的には、ほとんどの点で、リスナーが拘束されていないという問題に似ているため、見つけるのは困難でした。 CSSから次の行を削除して修正しました：z-index:-1;

0
elliott954