KnockoutJS-イベントバインディング

このバインディングは、特定のDOMイベントをリッスンし、それに基づいたハンドラー関数に関連付けられた呼び出しに使用されます。

構文

event: <{DOM-event: handler-function}>

パラメーター

パラメーターには、リッスンされるDOMイベントと、そのイベントに基づいて呼び出す必要があるハンドラー関数を含むJavaScriptオブジェクトが含まれます。この関数は任意のJavaScript関数にすることができ、必ずしもViewModel関数である必要はありません。

例

イベントバインディングの使用方法を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Event Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter Number :</p>
      <input data-bind = "value: someValue , event: {keyup: showMessage},
         valueUpdate: 'afterkeydown' "/><br><br>
         You Entered: <span data-bind = "text: someValue"/>

      <script type = "text/javascript">
         function ViewModel () {
            this.someValue = ko.observable();

            this.showMessage = function(data,event) {

               if ((event.keyCode < 47) || (event.keyCode > 58 )) { //check for number
                  if (event.keyCode !== 8)  //ignore backspace
                  alert("Please enter a number.");
                  this.someValue('');
               }
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを event-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
数値以外の値を入力しようとすると、アラートが表示されます。

観察

現在のアイテムをパラメーターとしてハンドラー関数に渡す

KOは、ハンドラー関数を呼び出すときにパラメーターとして現在のアイテムを渡します。これは、アイテムのコレクションを操作し、各アイテムで作業する必要がある場合に便利です。

例

現在のアイテムがイベントバインディングで渡される次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Event Binding - passing current item </title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <ul data-bind = "foreach: icecreams">
         <li data-bind = "text: $data, event: { mouseover: $parent.logMouseOver }"> </li>
      </ul>
      <p>You seem to be interested in: <span data-bind = "text: flavorLiked"> </span></p>


      <script type = "text/javascript">

         function ViewModel () {
            var self = this;
            self.flavorLiked = ko.observable();
            self.icecreams = ko.observableArray(['Vanilla', 'Pista', 'Chocolate',
               'Mango']);

           //current item is passed here as the first parameter, so we know which
           //flavor was hovered over
            self.logMouseOver = function (flavor) {
               self.flavorLiked(flavor);
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを event-bind-passing-curr-item ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
マウスがその上にあるフレーバーが表示されます。
これには、エイリアスとしてselfが使用されることに注意してください。これにより、イベントハンドラーで他の何かに再定義されることによる問題を回避できます。

さらにパラメーターを渡す、またはイベントオブジェクトを参照する

イベントに関連付けられたDOMイベントオブジェクトにアクセスする必要がある場合があります。 KOは、イベントをハンドラー関数の2番目のパラメーターとして渡します。

例

関数への2番目のパラメーターとしてイベントが送信される次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Event Binding - passing more params</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <div data-bind = "event: { mouseover: logMouseOver }">
         Press shiftKey + move cursor over this line.
      </div>

      <script type = "text/javascript">
         function ViewModel () {

            self.logMouseOver = function (data, event) {
               if (event.shiftKey) {
                  alert("shift key is pressed.");
               } else {
                  alert("shift key is not pressed.");
               }
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを event-bind-passing-more-params ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
Shiftキーを押しながらカーソルをテキストに移動します。 shiftKeyを押した場合にメッセージがポップアップ表示されることを確認します。

デフォルトのアクションを許可する

Knockoutは、デフォルトでイベントがデフォルトのアクションを実行することを回避します。入力タグにkeypressイベントを使用する場合、KOはハンドラー関数を呼び出すだけで、キー値を入力要素の値に追加しません。

イベントでデフォルトのアクションを実行する場合は、ハンドラー関数からtrueを返すだけです。

例

デフォルトアクションの実行を許可する次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Event Binding - allowing default action</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter the flavor you like from available menu: (Vanilla, Pista, Chocolate,
         Mango)</p>
      <input data-bind = "event: { keypress: acceptInput}"></input>

      <script type = "text/javascript">
         function ViewModel () {

            self.acceptInput = function () {
               return true;
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを event-bind-default-action ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
ハンドラー関数はtrueを返すため、押されたキーは実際に入力ボックスに表示されます。

イベントがバブリングするのを防ぐ

KOを使用すると、イベントを上位レベルのイベントハンドラーにバブルできます。 2つのmouseoverイベントがネストされている場合、両方のイベントハンドラー関数が呼び出されます。必要に応じて、youreventBubbleと呼ばれる追加のバインディングを追加し、それにfalse値を渡すことにより、このバブリングを防ぐことができます。

例

バブリングが処理される次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Event Binding - preventing bubbling </title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <div data-bind = "event: { mouseover: myParentHandler }">
         <button data-bind = "event: { mouseover: myChildHandler },
            mouseoverBubble: false">Click me to check bubbling.</button>
      </div>

      <script type = "text/javascript">
         function ViewModel () {
            var self = this;

            self.myParentHandler = function () {
               alert("Parent Function");
            }

            self.myChildHandler = function () {
               alert("Child Function");
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを event-bind-prevent-bubble ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
マウスオーバーボタンを移動すると、メッセージが表示されます。 mouseoverBubbleをfalseに設定することにより、バブリングが防止されます。

Knockoutjs-event-binding

目次

KnockoutJS-イベントバインディング

観察

現在のアイテムをパラメーターとしてハンドラー関数に渡す

さらにパラメーターを渡す、またはイベントオブジェクトを参照する

デフォルトのアクションを許可する

イベントがバブリングするのを防ぐ