- ベストアンサー
繰り返し処理をして、要素がいくつあっても、うまくい
while文で繰り返し処理をして、要素がいくつあっても、うまくいくようにしたいのですが、var inputResultをカプセル化できないのでこのような場合どうすればいいのでしょうか？ https://codepen.io/anon/pen/XqOWrQ document.querySelectorAll('.js-myBtn').addEventListener と変更したのですが、このボタンの一つ目を押したら一つ目として実行二つ目以降も同様にとなりません。 イベントを起こすトリガーの要素を配列で指定はできないのでしょうか？
- mousugusokoni
- お礼率52% (43/82)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
addEventListenerは要素に適応できるメソッドですが、要素の配列には適応できません。 今回のように対象の要素が固まっている場合は、それらを囲む親要素を用意して、その親要素１つにイベントハンドラを設定するのが良いでしょう １つにまとめても、イベントハンドラ中で実際どの要素が対象だったかを知ることが出来ます いっそ最も親のレイヤーであるdocument.bodyやwindowなどに設定しても良い場合もあります もちろんわざわざ配列をイテレートして各要素にハンドラを設定してもいいですし、 カスタムエレメントとして定義して要素が生まれたときに設定されるようにもできます
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
ボタンが100個あったなら addEventListener を100回登録するの？ それは馬鹿げた考え！ 何個あろうが親である document で監視する。1個で済む。 body 要素が読み込まれる前でも document は存在するし... まぁこれは定石。 <!DOCTYPE html> <meta charset="UTF-8"> <title>Event</title> <body> <input type="button" value="btn1"> <input type="button" value="btn2"> <input type="button" value="btn3"> <script> function handleEvent (event) { let e = event.target; if ('button' === e.type) { alert(e.value + 'ボタンが押された'); } } document.addEventListener ('click', handleEvent, false) </script>
- b0a0a
- ベストアンサー率49% (156/313)
ただ単にイベントは親要素へ伝播するということだけなので、 ちょっと適当に探しただけではいいのが見つかりませんが、 イベントの仕組みを学べば自ずと理解できることだと思います https://www.webprofessional.jp/event-bubbling-javascript/ このような情報をたくさん見るといいでしょう
お礼
Inputタグのボタンがたくさんあって個数が決まっていない場合もこのInputタグを全体を囲んだ親要素と作ればできるということでよろしいでしょうか？ ちょっと忙しくなったので、お時間ください。
補足
親要素１つにイベントハンドラを設定と検索しても出てこないのですが、こんな検索をするとこの方法がでると教えていただけますでしょうか？