読者です 読者をやめる 読者になる 読者になる

もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

【Javascript】ある要素のすべてのイベントの発生タイミングを調べる

経緯

セレクトボックスを選択した時(値が決まった時)にモーダルを表示するという機能を作成した

この時、セレクトボックスのonchangeイベントに関数を登録し、内部で値をチェック後、モーダルを表示する動きをしていた

この時の問題点は、同じ値を選択したときにモーダルが表示されないこと

onchangeイベントが発生しないため仕方ない・・・

チェックするイベントを増やせば良いと思ったものの、「選択中」とか「変わらなかった」とか分かりやすいイベントが無い

今回はセレクトボックスだったので、セレクトボックスに「開かれた」、「閉じた」、「値が変わらなかった」という独自イベントを追加したくなった

なので、セレクトボックスが「開かれた」・「閉じた」ときにどんなイベントが発生しているかチェックする処理を他のサイトを参考にしながら作成した

実装

以下のサイトを参考に作成

note.onichannn.net

(function(window, jQuery) {
  'use strict';

  function getAllEvents(element) {
    var result = [];
    for(var key in element) {
    if (key.indexOf('on') === 0) {
    var text = key.substr(2, key.length) ;
        result.push(text);
    }
  }
  return result.join(' ');
}

  window.console.log(jQuery('#test').context);
  window.console.log(getAllEvents(jQuery('#test')[0]));

  jQuery('#test').bind(getAllEvents(jQuery('#test')[0]), function(e) {
    window.console.log(e.type);
  });

})(window, window.jQuery);

↓実際のコード

セレクトボックスに「開かれた」、「閉じた」、「値が変わらなかった」という独自イベントを追加した話は次に書こうと思う