Javascriptによるテキスト入力状態によるボタン有効化処理の実装について

Question

下記のリンクにあるように、
「input要素やtextarea要素に文字が入力されたら有効になるリンクボタン」を実装したいです。
入力による有効になるリンクボタン

<div class="demo2">
<input type="text" id="input2" autocomplete="off">
<button type="button" id="submit2" value="送信" disabled>送信</button>
</div>

window.addEventListener('DOMContentLoaded',function(){
document.getElementById('submit2').disabled = true;
document.getElementById('input2').addEventListener('keyup',function(){
if (this.value.length < 2) {
document.getElementById('submit2').disabled = true;
} else {
document.getElementById('submit2').disabled = false;
}
},false);
document.getElementById('input2').addEventListener('change',function(){
if (this.value.length < 2) {
document.getElementById('submit2').disabled = true;
}
},false);
},false);

このHTMLコードを.pugに変換した場合、下記のようなコードになるのですが、

.demo2
  input#input2(type='text', autocomplete='off')
  button#submit2(type='button', value='送信', disabled='') 送信

ここで、
上記のjavascriptはどのタイミングで作動するのでしょうか？
てっきり、

$("#input2").blur(××関数);

のように、特定の処理が施されたら作動するものと考えているのですが、
この場合特定の入力欄に全て入力された場合作動するため、
複数の記入項目が存在する場合、
全ての項目の#input2要素が記入された場合というのはどのように条件付すれば良いのでしょうか？

因みに

$("#input2" + "#input2_1").blur(××関数);

のような形式だと、複数の記入項目のクラスが同時に呼び出された時、と見なされるのでしょうか？

どなたかお力添えいただきたいです！

Answer 1

<script>
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#input2').addEventListener('input',function(e){
    document.querySelector('#submit2').disabled=(e.target.value==="");
  });
});
</script>
<div class="demo2">
<input type="text" id="input2" autocomplete="off">
<button type="button" id="submit2" value="送信" disabled>送信</button>
</div>