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
打印页面
上一页
下一页
广告