<div ng-app="App" ng-controller="Sample">
  <select ng-model="Sample.selectValue" ng-select-event expanded="Sample.onOpened()" unexpanded="Sample.onClosed()"  nonchanged="Sample.onNonChanged()" ng-change="Sample.onChanged()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  {{Sample.selectValue}}
</div>

Javascript（jQuery、AngularJS）

(function(window, jQuery, angular) {
  'use strict';
  
  var module = angular.module('App', []);
  
  module.controller('Sample', [
    '$scope',
    function($scope) {
      $scope.Sample = this;
      
      this.selectValue = '1';
    
      this.onOpened = function() {
        window.console.log('おーぷん');
      };
      
      this.onClosed = function() {
        window.console.log('しまった');
      };
      
      this.onChanged = function() {
        window.console.log('変わった');
      };
      
      this.onNonChanged = function() {
        window.console.log('変わってない');
      };
    }
  ]);
  
  /**
   * 普通のselect要素では、「リストボックスが開かれた」、「リストボックスが閉じた」、
   * 「値が変わらなかった」等のイベントが無いため作成
   * 
   * 以下のイベントを発生させる
   * 　　・リストボックスが開かれた
   * 　　・リストボックスが閉じた
   * 　　・値が変わらなかった
   */
  module.directive('ngSelectEvent', [
    '$timeout',
    function($timeout) {
      return {
        restrict: 'A',
        scope: {
          expanded: '&',
          unexpanded: '&',
          nonchanged: '&'
        },
        link: function(scope, element, atts, ctrl) {
          var jQueryElement = jQuery(element);
          
          var WATCH_EXPAND_EVENTS = 'click';
          var WATCH_UNEXPAND_EVENTS = 'click blur keyup';
          
          jQueryElement.data('expanded', false);

          var __expanding = function() {
            jQueryElement.off(WATCH_EXPAND_EVENTS, __expanding);
            jQueryElement.data('expanded', true);
            jQueryElement.data('oldvalue', jQueryElement.val());
            jQueryElement.on(WATCH_UNEXPAND_EVENTS, __unexpanding);

            (scope.expanded)();
          };

          var __unexpanding = function() {
            jQueryElement.off(WATCH_UNEXPAND_EVENTS, __unexpanding);
            jQueryElement.data('expanded', false);
            jQueryElement.on(WATCH_EXPAND_EVENTS, __expanding);

            (scope.unexpanded)();
            
            var oldValue = jQueryElement.data('oldvalue');
            $timeout(function() {
              var newValue = jQueryElement.val();
              if (oldValue == newValue) {
                (scope.nonchanged)();
              }
            }, 0);
          };

          jQueryElement.on(WATCH_EXPAND_EVENTS, __expanding);
        }
      };
    }
  ]);
  
})(window, window.jQuery, window.angular);

今後の自分のためにも、AngularJSを使用しないソースコードも作ろうと思ったけど面倒くさくなったでござる

問題点？

見直しでjsfiddleで動作確認したところ、「ESC」キーを押したときの挙動がイマイチかも

「ESC」キー押してもイベントが走るように、「keyup」イベントを監視するようにしているけれども、２回押さないと反応してくれない・・・

他のキー（数字の1とか）を押した後だと、１回でイベントが呼ばれる感じ

keyupイベントは別処理にして、押されたキーのチェックをしたほうが良いかもしれない

2017-02-14

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

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);

↓実際のコード

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

もなかアイスの試食品

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

【C#】「tail -f」コマンドっぽいものを作ってみた

はじめに

ソースコード

使い方

【Javascript】select要素の開いた／閉じたイベントを実装した話

はじめに

実装

問題点？

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

経緯

実装