複数の要素で同じイベントを発火させたい

Question

前提・実現したいこと

javascriptにおいて、複数の要素に同じイベントを設定したいです。
実装方法を調べてみたのですが、当該情報を見つけることができなかたため、方法をご教示いただきたいです。

私のコードの状況を簡略化したものが以下です。
現在は、a要素の変更を検知してイベントが発火しているのですが、
これを、a,b,c,d要素のいずれかの変更を検知してイベントを発火する、
というように変更したいです。

該当のソースコード

// ユーザーが入力するフォームの要素を取得
const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")
const d = document.getElementById("d")

// ユーザーの入力を元に自動入力されるフォームの要素を取得
const e = document.getElementById("e")

// ユーザーが入力したらイベントが発火
a.addEventListener('change', function(){
  e.value = "変更されました"
});

Answer 1

まず、記載がネイティブなので、ネイティブでいきます。
（今回は、jQuery使った方がはるかに楽ではあります）
HTMLにもよりますが、かなり要件によって様々適した方法が予想されますが、
その一例だけでも記載します。
各input要素に、同じクラスを当てて、走査してイベントを割り当てるパターンです。

まず、下記のように、HTMLを、IDが違うが、同じクラスを割り当てた要素、にします。

<input type="radio" name="typeR" id="a" class="inCheck" value="a">
<input type="radio" name="typeR" id="b" class="inCheck" value="b">
<input type="checkbox" name="typeC" id="c" class="inCheck" value="c">
<input type="checkbox" name="typeC" id="d" class="inCheck" value="d">
<input type="text" name="typeT" id="e" value="">

JavaScriptは下記のようにします。

const inputs = document.querySelectorAll('.inCheck');
const eInput = document.getElementById('e');

inputs.forEach(el=>{
  el.addEventListener('change', function(){
    eInput.value = "変更されました";
  });
});

というように、クラスは基本的に、複数の要素に対して、同じCSSや処理を当てることに適したものなので、
用法としてはこんな感じです。

他にも、ネイティブであれば、nameの値によって、走査したり、
formで囲えば、その中身として、inputを取得できたりと、様々便利な方法があるので、
その要件に応じて、適した方法を選ぶといいかと思います。

今回は、要件が明確ではないので、多少汎用的な方法を提示いたしました。

Comments

[t.togashi]

> クラスは基本的に、複数の要素に対して、同じCSSや処理を当てることに適したものなので

この考え方が欠如していたことに気がつくことが出来ました。
ありがとうございました。

Answer 2

たとえばこうとか。

// ユーザーの入力を元に自動入力されるフォームの要素を取得
const e = document.getElementById( 'e' );

// ユーザーが入力したらイベントが発火
document.querySelector( '#a, #b, #c, #d' ).forEach( elem => {
	elem.addEventListener( 'change', event => {
		e.value = '変更されました';
	} );
} );

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

Comments

[t.togashi]

お力添えをいただきありがとうございました！