LoginSignup
0

More than 3 years have passed since last update.

JavaScript 他言語によって制御されるHTMLタグへのイベントの追加

Last updated at Posted at 2019-07-15

最近ハマったところです。

ループによって生成されているボタンにJSイベントを追加する書き方

html
<div <!--なんらかの繰り返し処理 PHPとかで書くやつ-->>
    <form>
        <input class="hoge" type="button" name="huga">
    </form>
</div>
js
var btn = document.getElementByClassName("hoge");
    for(var i = 0;i < btn.length;i++){
        btn[i].addEventListener('click',function(){
            //お好きな処理をどうぞ
        });
    }

よくわかるかわからない解説

GetElementById以外は配列で取得されます。

JSの実行より先にHTMLが読み込まれるので、J生成されたタグをJS側で配列として取得し、その配列の長さ文for文を回します。
そうするとあら不思議!各要素にイベントが追加できちゃいます。

〜書き方〜

最初にイベントを追加したいタグの配列を取得します。
サンプルコードだとボタンってやつ。
.lengthメソッドで長さ所得して、その長さ分forでくるくるします。
for文のiを添字に勝手に作られてしまった各ボタンにイベントを追加しています。
ちなみに親要素とか子要素になんかしたい場合はthis.parentNodeとかで親要素にDOMDOMできます。

function内では自身のインスタンスを参照してイベントを追加しているので??????? -->書いててわからなくなりました。誰か正しい言葉を教えてください。

まあなんかaddEvent('●●' functin(){~~~});は追加するやつの独壇場って感じです。
俺だ俺だ!!!!ってのがthisです。this.parentNodeじゃなくて普通にbtn[i]でもいいんですけどね。

おしまい

めちゃめちゃググっても出てこねえし備忘録的なアレ。この墓場にたどり着いた人がいたら正しい表現を教えてくださいね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0