ループとjQueryを使わずに同じクラスのすべての要素にClickイベントを追加

Question

ループとjqueryなしで同じクラスのすべての入力に対してclickイベントを実行するコードを記述する必要があります。

私が思い付くことです：

document.body.addEventListener('click', function (click) { 
    if (click.target.className == 'abc') { 
     document.frame.screen.value += this.value; 
    } 
}); 

と作品をクリックするが、私は含まれていた入力をクリックundefined代わりの値を得ました。

Answer 1

クリックは機能しますが、クリックされた入力には値の代わりに未定義があります。

値を取得するときにclick.targetの代わりにthisを使用したため、あなたはclick.targetを使用したい：あなたのハンドラ内

document.frame.screen.value += click.target.value; 
// Here -----------------------^^^^^^^^^^^^ 

thisはdocument.bodyになります。クラスをチェックするときにはclick.targetを正しく使用しましたが、値を取得するときは正しく使用しませんでした。

いくつかの注意：

• FWIW、イベントハンドラでイベント・パラメータのための通常の名前はeventかe、ないclickです。
• 要素は複数のクラスを持つことができ、すべてがclassNameになります。 の問題が考えられる場合は、代わりに.classList.contains("abc")をご覧ください。 （classListは現代のすべてのブラウザで利用でき、古くなったものにポリフィルすることができます）

• input要素では問題ありませんが、将来、子孫要素を持つ要素でこれを行う場合は、クリックして、ターゲット要素の子孫にあった可能性を処理するためのループを持っている必要があります：

  var node = event.target; 
  while (!node.classList.contains("abc")) { 
      if (node === this) { 
       return; // The click didn't pass through a matching element 
      } 
      node = node.parentNode; 
  } 
  // Use it here