KnockoutJS - event 绑定

更新于 2025/1/15 21:37:17

此绑定用于监听特定的 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 文件。
按 shiftKey + 将光标移动到文本。请注意，如果您按下了 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.htm 文件中。
在浏览器中打开此 HTML 文件。
由于处理程序函数返回 true，因此按下的任何键实际上都会显示在输入框中。

防止事件冒泡

KO 将允许事件冒泡到更高级别的事件处理程序。这意味着如果您有两个嵌套的鼠标悬停事件，那么这两个事件的处理函数都会被调用。如果需要，可以通过添加一个名为 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>

输出

让我们执行以下步骤来查看上述代码的工作原理 −