KnockoutJS - 事件繫結

此繫結用於監聽特定的 DOM 事件，並根據事件呼叫關聯的處理程式函式。

語法

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

引數

引數包含一個 JavaScript 物件，其中包含將要監聽的 DOM 事件和需要根據該事件呼叫的處理程式函式。此函式可以是任何 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.htm檔案中。
在瀏覽器中開啟此 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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
滑鼠懸停在其上的“Flavor”將顯示。
請注意，此處使用了 `self` 作為別名。這有助於避免在事件處理程式中將其重新定義為其他內容。

傳遞更多引數或引用事件物件

您可能需要訪問與事件關聯的 DOM 事件物件。KO 將事件作為第二個引數傳遞給處理程式函式。

示例

讓我們來看下面的例子，其中事件作為第二個引數傳送給函式。

線上演示

<!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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
按下 Shift 鍵 + 將游標移動到文字。觀察到訊息會彈出，顯示您是否按下了 Shift 鍵。

允許預設操作

預設情況下，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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
因為處理程式函式返回 true，所以任何按下的鍵實際上都會顯示在輸入框中。

阻止事件冒泡

KO 將允許事件冒泡到更高級別的事件處理程式。這意味著如果您嵌套了兩個 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.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
移動滑鼠懸停按鈕，您將看到一條訊息。由於使用了 `mouseoverBubble` 設定為 false，因此阻止了冒泡。

knockoutjs_declarative_bindings.htm

列印頁面