動的に作成された要素にイベントリスナーを追加します -- javascript フィールド と addeventlistener フィールド と dom-events フィールド と intercept フィールド 関連 問題

add event listener on elements created dynamically












52
vote

問題

日本語

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

すべての要素が使用されているときに作成されたすべての要素について:

<事前> <コード> doc.body.addEventListener('click', function(e){ //my code },true);

新しい要素がページに表示されたときにこのコードを呼び出す方法が必要ですが、jQuery(Delegate、Onなど)は使用できません。どうやってこれを行うことができますか?

英語

Is possible to add event listener (Javascript) to all dynamically generated elements? I'm not the owner of the page, so I cannot add a listener in a static way.

For all the elements created when the page loaded I use:

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

I need a method to call this code when new elements appear on the page, but I cannot use jQuery (delegate, on, etc cannot work in my project). How can I do this?

</div
           

回答リスト

80
 
vote
vote
ベストアンサー
 

ライブラリに戻ることなく委任戦略を追求する必要があるように聞こえます。私はここでのフィドルにいくつかのサンプルコードを投稿しました: http://jsfiddle.net/founddrama/ggmun/ その趣味は、 event オブジェクトの<コード> target を使用して、興味を持っている要素を探し、それに応じて応答することです。

のようなもの <事前> <コード> 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 } });

警告!「古いIE'S」をサポートする必要がある場合は、標準準拠のブラウザ(つまり、IE9 +、および他のすべてのバージョンのすべてのバージョン)のコードのみが含まれています。 attachEvent 、それからあなたはまたあなた自身のカスタムラッパーを適切なネイティブ機能の周りに提供したいと思うでしょう。 (これについてはあちこちによく議論されています。Nicholas Zakasは、Web開発者のための Professional JavaScript のために提供されています。)

 

It sounds like you need to pursue a delegation strategy without falling back to a library. I've posted some sample code in a Fiddle here: http://jsfiddle.net/founddrama/ggMUn/

The gist of it is to use the target on the event object to look for the elements you're interested in, and respond accordingly. Something like:

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! The example Fiddle only includes code for the standards-compliant browsers (i.e., IE9+, and pretty much every version of everyone else) If you need to support "old IE's" attachEvent, then you'll want to also provide your own custom wrapper around the proper native functions. (There are lots of good discussions out there about this; I like the solution Nicholas Zakas provides in his book Professional JavaScript for Web Developers.)

</div
 
 
         
         
17
 
vote

新しい要素を追加する方法によって異なります。

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

<事前> <コード> var btn = document.createElement("button"); btn.addEventListener('click', masterEventHandler, false); document.body.appendChild(btn);

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

 

Depends on how you add new elements.

If you add using createElement, you can try this:

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

Then you can use masterEventHandler() to handle all clicks.

</div
 
 
   
   
2
 
vote

ここに注目に値するあいまいな問題もこの事実であるかもしれません:

要素に z-index -1 に設定した場合は、次のように考えることができます。 リスナーは、実際にはそれがあるのではなく、ブラウザではありません。 z-index 要素をクリックしていると思います。

この場合は、リスナーがバインドされていないというわけではなく、代わりに焦点を取得することはできません(たとえば、隠された要素)はあなたの要素の上にあります。そして、代わりにフォーカスが獲得されるのか(意味:イベントはトリガーされていません)。幸いなことに、要素を右クリックすることで、「検査」を選択して確認することで、「検査」を選択することで簡単に簡単に検出できます。

クロムを使っていて、他のブラウザが影響を受けているかどうかわかりません。しかし、機能的には、リスナーがバインドされていないという問題がほとんどの点で似ているのは、見つけるのが難しかったです。 event0

をCSSから削除することで修正しました。
 

An obscure problem worth noting here may also be this fact I just discovered:

If an element has z-index set to -1 or smaller, you may think the listener is not being bound, when in fact it is, but the browser thinks you are clicking on a higher z-index element.

The problem, in this case, is not that the listener isn't bound, but instead it isn't able to get the focus, because something else (e.g., perhaps a hidden element) is on top of your element, and that what get's the focus instead (meaning: the event is not being triggered). Fortunately, you can detect this easily enough by right-clicking the element, selecting 'inspect' and checking to see if what you clicked on is what is being "inspected".

I am using Chrome, and I don't know if other browsers are so affected. But, it was hard to find because functionally, it resembles in most ways the problem with the listener not being bound. I fixed it by removing from CSS the line: z-index:-1;

</div
 
 
1
 
vote

event1 と同様に、動的イベントリスナを追加するための小さな関数を作成しました。

承認済み回答と同じ考えを使用して、 event2 メソッドを使用してターゲットが指定されたセレクタ文字列と一致するかどうかを確認します。

<事前> <コード> event3

から取得できます。
 

I have created a small function to add dynamic event listeners, similar to jQuery.on().

It uses the same idea as the accepted answer, only that it uses the Element.matches() method to check if the target matches the given selector string.

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

You can get if from github.

</div
 
 
0
 
vote

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

  1. true または<コード> false
  2. EG。
  3. <事前> <コード> let myEvnt = document.createElement('span'); myEvnt.setAttribute('class', 'someClass'); myEvnt.addEventListener('click', e => { if(event.target.classList.contains('someClass')){ console.log(${event.currentTarget.classList}) }})
    1. 参照: HTTPS: //gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
    2. 良い読み取り: https://eloquentjavascript.net/15_event.html#h_nehx0cdpml < / li>
    3. mdn: https://developer.mozilla.org / en-us / docs / web / api /イベント/ contafic_of_event_targets
    4. 挿入点:
 

Delegating the anonymous task to dynamically created HTML elements with event.target.classList.contains('someClass')

  1. returns true or false
  2. eg.
let myEvnt = document.createElement('span'); myEvnt.setAttribute('class', 'someClass'); myEvnt.addEventListener('click', e => {   if(event.target.classList.contains('someClass')){      console.log(${event.currentTarget.classList}) }}) 
  1. Reference: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
  2. Good Read: https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
  3. MDN : https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
  4. Insertion Points:
</div
 
 
0
 
vote

このライブラリを見たいのかもしれません: https://github.com/financial-times / FTDOMDELEGATE これは1,8K gzipped

登録時にDOMに何かが存在するかどうかに関係なく、特定のセレクタに一致するすべてのターゲット要素のイベントへのバインドを行うために作成されます。

スクリプトをインポートしてから、そのようにインスタンス化する必要があります。

<事前> <コード> var delegate = new Delegate(document.body); delegate.on('click', 'button', handleButtonClicks); // Listen to all touch move // events that reach the body delegate.on('touchmove', handleTouchMove); });
 

You might wanna take a look at this library: https://github.com/Financial-Times/ftdomdelegate which is 1,8K gzipped

It is made for binding to events on all target elements matching the given selector, irrespective of whether anything exists in the DOM at registration time or not.

You need to import the script and then instantiate it like that:

  var delegate = new Delegate(document.body);   delegate.on('click', 'button', handleButtonClicks);    // Listen to all touch move   // events that reach the body   delegate.on('touchmove', handleTouchMove);  });   
</div
 
 
-12
 
vote

classList プロパティを使用して、一度に複数のクラスをバインドします。 <事前> <コード> var container = document.getElementById("table"); container.classList.add("row", "oddrow", "firstrow");

 

Use classList property to bind more than one class at a time

var container = document.getElementById("table"); container.classList.add("row", "oddrow", "firstrow"); 
</div
 
 
 
 

関連する質問

0  QPainter :: drawtext()が呼び出されたときのテキストを取得する  ( Qt getting the text when qpainterdrawtext is called ) 
QPAINTERオブジェクトを持っていて、QPainter :: DrawTextが呼び出されたときに描かれている文字列を取得したい(存在しませんので、できません。 )。 これをする最善の方法は何でしょうか? DrawTextメソッドをSetProperty...

1  すべてのデータ核のJDO SQLクエリを傍受することは可能ですか?  ( Is it possible to intercept all datanucleus jdo sql queries ) 
データデータベースにアクセスするためにDataN ucleusのJDOの実装を使用して運用Javaアプリケーションがあると仮定すると、データベースに行われたすべてのSQLクエリを傍受することができますか。その意図はそれらの統計を実行し、ログ/トレースを保持する...

0  TCP / UDPパケットを傍受する  ( Intercepting tcp udp packets ) 
TCP / UDPトラフィックを傍受するために利用可能なプロキシが知りたいのですが。 他のWebデバッグプロキシを介して傍受できないTCPおよびUDPトラフィックがあります。 誰かが同じに正しい解決策を提案できるかどうか感謝します。 ありがとう ウマス・ナラ...

4  デカップリングされたオブジェクト間で制約を強制する方法  ( How to enforce constraints between decoupled objects ) 
注 - このスレッドの新参者にとっての価値がまだ価値があると思いますので、元の投稿を下に移動しました。以下に続くものは、フィードバックに基づいて質問を書き換えることの試みです。 完全に縮小されたポスト OK、私は私の特定の問題についてもう少し詳しく...

2  Linuxで受け入れると同じソケットID?  ( Same socket id when accept on linux ) 
accept()関数を傍受するld_preloadを書きました。許可機能が私に同じファイル記述子を与えることがあるため、問題があります。このプリロードを1つのプロセスのみにロードします。 マイコード: <事前> <コード> int accept(int so...

2  どのように切片はGLMフィットで計算されましたか?  ( How is the intercept computed in the glm fit ) 
私はコードを読んでてきました< Rのソースコードを自由に利用可能であるので、A />、一般化線形モデル(GLM)に合うようにRによって使用されます。使用されるアルゴリズムは、かなり文書化アルゴリズムである、反復再重み付け最小二乗法(IRLS)と呼ばれます。各反...

4  HTTPトラフィックを傍受する方法[閉じる]  ( How to intercept http traffic ) 
ここで尋ねられていることを知るのは難しいです。この問題はあいまい、曖昧で、不完全で、過度に広く、または修辞的であり、現在の形で合理的に回答することはできません。再開できるようにこの質問を...

0  [MacOSX] Dlopen呼び出しを開き、読み取り機能を読みますか?  ( Macosxdoes dlopen call open and read functions ) 
MacOS Xとその他の機能の下でDlopen関数を傍受(介在させた)関数を傍受しました。 私のアプリケーションがログ内でDlopenを呼び出す方法を見ますが、動的ライブラリがDlopenedの後に開/読み取り関数に関連するものはありません。システムはどのよ...

2  BlackBerryで発信通話を傍受します  ( Intercept outgoing call in blackberry ) 
次のことを行う方法を探しています。 BBを持つユーザーは番号を入力します(または連絡先を選択して[Send] 'をクリック) バックグラウンドでのアプリはコールイベントを検出します 私たちのアプリは何かをします(例えば、電話をブロック/さまざまな数の電話を...

3  node.js - パケットを傍受するのに役立ちます  ( Node js help intercepting packets ) 
次のnode.jsプロキシ(http://www.catonmat.net/http-proxy-in-nodejs/)を持っています。 <事前> <コード> var http = require('http'); var util=require('util...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有