event: <DOM-event: handler-function>

优质

小牛编辑

130浏览

2023-12-01

此绑定用于侦听特定的DOM事件以及基于它的与处理程序函数关联的调用。

Syntax

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

Parameters

参数包含一个JavaScript对象，包含将被侦听的DOM事件和一个需要根据该事件调用的处理函数。这个函数可以是任何JavaScript函数，也不一定是ViewModel函数。

Example

让我们看一下下面的示例，该示例演示了事件绑定的用法。

<!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>

Output

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

将上述代码保存在event-bind.htm文件中。
在浏览器中打开此HTML文件。
尝试键入任何非数字值，系统将提示您提示。

观察 (Observations)

将当前项作为参数传递给处理函数

在调用处理函数时，KO将传递当前项作为参数。这在处理项目集合时非常有用，需要对每个项目进行处理。

Example

让我们看一下以下示例，其中在事件绑定中传递当前项。

<!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>

Output

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

将上述代码保存在event-bind-passing-curr-item.htm文件中。
在浏览器中打开此HTML文件。
显示带有鼠标的Flavor。
请注意，self作为别名用于此目的。这有助于避免将任何问题重新定义为事件处理程序中的其他内容。

传递更多参数或引用事件对象

可能存在需要访问与事件关联的DOM事件对象的情况。 KO将事件作为第二个参数传递给处理函数。

Example

让我们看一下以下示例，其中事件作为第二个参数发送到函数。

<!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>

Output

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

将上述代码保存在event-bind-passing-more-params.htm文件中。
在浏览器中打开此HTML文件。
按shiftKey +将光标移动到文本。注意，如果您按下shiftKey，将弹出消息。

允许默认操作

默认情况下，Knockout将避免事件执行任何默认操作。这意味着如果对输入标记使用按键事件，则KO将仅调用处理函数，并且不会将键值添加到输入元素值。

如果您希望事件执行默认操作，则只需从处理函数返回true。

Example

让我们看一下允许进行默认操作的以下示例。

<!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>

Output

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

将上述代码保存在event-bind-default-action.htm文件中。
在浏览器中打开此HTML文件。
按下的任何键实际上都显示在输入框中，因为处理函数返回true。

防止事件冒泡

KO将允许事件冒泡到更高级别的事件处理程序。这意味着如果嵌套了两个鼠标悬停事件，则将调用它们的两个事件处理函数。如果需要，可以通过添加一个名为youreventBubble的额外绑定并将false值传递给它来防止这种冒泡。

Example

让我们看一下下面的例子，其中处理冒泡。

<!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>

Output

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

将上述代码保存在event-bind-prevent-bubble.htm文件中。
在浏览器中打开此HTML文件。
移动鼠标悬停按钮，您将看到一条消息。由于将mouseoverBubble设置为false，因此阻止了冒泡。

event: &lt;DOM-event: handler-function&gt;

观察 (Observations)

将当前项作为参数传递给处理函数

传递更多参数或引用事件对象

允许默认操作

防止事件冒泡

event: <DOM-event: handler-function>