javascript: addEventListenerを複数選択する方法

Question

実現したい事
フォームで入力している内容をリアルタイムで監視して入力内容が求めている記載方法に一致しているかを判定したいです。

困っている事
下記の記述で、PCからの入力では特に問題なく動作します。しかし、スマホで試してみると、スマホでフォームにコピペをすると発火しなくて困っています。（コピペした後に一文字空白を入れると発火はします）

解決したい事
スマホでの入力時にコピペをしても下記のaddEventListenerの処理が走るようにしたい。

addEventListenerのkyeup以外にpasteも入れればいいのかなと思ったのですがaddEventListenerに複数のイベントリスナーをつける方法が分からなくて困っています。

(function () {
  'use strict';
  var text = document.getElementById("mail");
  var other = document.getElementById("label");

  inputText.addEventListener('keyup', function() {
    var s = text.value;
    var check = !!s.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/);
    if(!!s && check){
      other.textContent = "Good";
    }else{
      other.textContent = "Bad";
    }
  }, false);
})();

現状の打開策
下記のようにaddEventListenerを二つ作る事でやりたいことを実現はできます。
しかし、処理内容がほぼ一緒なのでなんとかして1つにまとめる方法について知りたいです。

(function () {
  'use strict';
  var text = document.getElementById("mail");
  var other = document.getElementById("label");

  inputText.addEventListener('keyup', function() {
    var s = text.value;
    var check = !!s.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/);
    if(!!s && check){
      other.textContent = "Good";
    }else{
      other.textContent = "Bad";
    }
  }, false);

  inputText.addEventListener('paste', function() {
    var s = text.value;
    var check = !!s.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/);
    if(!!s && check){
      other.textContent = "Good";
    }else{
      other.textContent = "Bad";
    }
  }, false);
})();

Answer 1

スマホでの入力時にコピペをしても下記のaddEventListenerの処理が走るようにしたい。

inputイベントを使ってはどうでしょうか。「キーボードからの入力」「貼り付け」など、入力方法によらず中身が変化した時にイベントが動きます。

---

addEventListenerに複数のイベントリスナーをつける方法が分からなくて困っています。

こちらについては、「関数だけ別に用意してあとから複数セットする」のがいいかと思います。

  var handler = function() {
    var s = text.value;
    var check = !!s.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/);
    if(!!s && check){
      other.textContent = "Good";
    }else{
      other.textContent = "Bad";
    }
  }
  inputText.addEventListener('keyup', handler, false);
  inputText.addEventListener('paste', handler, false);

Comments

[nanase21]

ご教示いただきありがとうございます。

> inputイベントを使ってはどうでしょうか。「キーボードからの入力」「貼り付け」など、入力方法によらず中身が変化した時にイベントが動きます。

input用のイベントを調べさせていただきました。
下記のoninputのことでしょうか？
input.oninput = function()

[maisumakun]

oninputを使ってもいいですが、addEventListenerでイベントの種類として'input'と指定することも可能です。

[nanase21]

addEventListenerでも`input`と指定できるのですね。
@maisumakunさんならこのような実装をする時、oninputとaddEventListenerならどちらを使うのでしょうか？
ご教示いただけると幸いです。