KnockoutJS - Enlace de eventos

Este enlace se usa para escuchar un evento DOM específico y llamar asociado con la función del controlador basado en él.

Syntax

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

Parameters

El parámetro incluye un objeto de JavaScript, que contiene el evento DOM que se escuchará y una función de controlador que debe invocarse en función de ese evento. Esta función puede ser cualquier función de JavaScript y no es necesario que sea una función de ViewModel.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace de eventos.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en event-bind.htm archivo.
Abra este archivo HTML en un navegador.
Intente introducir cualquier valor no numérico y se le mostrará una alerta.

Observaciones

Pasar un elemento actual como parámetro a la función del controlador

KO pasará el elemento actual como parámetro al llamar a la función del controlador. Esto es útil cuando se trabaja con una colección de elementos y es necesario trabajar en cada uno de ellos.

Example

Echemos un vistazo al siguiente ejemplo en el que el elemento actual se pasa en el enlace de eventos.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en event-bind-passing-curr-item.htm archivo.
Abra este archivo HTML en un navegador.
Se muestra Flavor, que tiene el mouse sobre él.
Tenga en cuenta que para esto se usa self como alias. Esto ayuda a evitar cualquier problema con la redefinición de esto a otra cosa en los controladores de eventos.

Pasar más parámetros o hacer referencia al objeto de evento

Puede haber una situación en la que necesite acceder al objeto de evento DOM asociado con el evento. KO pasa el evento como un segundo parámetro a la función del controlador.

Example

Echemos un vistazo al siguiente ejemplo en el que el evento se envía como segundo parámetro para funcionar.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en event-bind-passing-more-params.htm archivo.
Abra este archivo HTML en un navegador.
Presione shiftKey + mover el cursor al texto. Observe que el mensaje aparecerá mostrando si ha presionado la tecla shift.

Permitir la acción predeterminada

Knockout evitará que el evento realice cualquier acción predeterminada, por defecto. Es decir, si usa un evento de pulsación de tecla para una etiqueta de entrada, entonces KO simplemente llamará a la función del controlador y no agregará el valor de la tecla al valor de los elementos de entrada.

Si desea que el evento realice una acción predeterminada, devuelva verdadero desde la función del controlador.

Example

Veamos el siguiente ejemplo que permite que se lleve a cabo una acción predeterminada.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en event-bind-default-action.htm archivo.
Abra este archivo HTML en un navegador.
Cualquier tecla presionada se muestra realmente en el cuadro de entrada porque la función del controlador devuelve verdadero.

Evitar que el evento burbujee

KO permitirá que el evento llegue a los controladores de eventos de nivel superior. Lo que significa que si tiene dos eventos de mouseover anidados, se llamará a la función del controlador de eventos para ambos. Si es necesario, este burbujeo se puede evitar agregando un enlace adicional llamado youreventBubble y pasándole un valor falso.

Example

Echemos un vistazo al siguiente ejemplo en el que se maneja el burbujeo.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en event-bind-prevent-bubble.htm archivo.
Abra este archivo HTML en un navegador.
Mueva el botón del mouse sobre y verá un mensaje. El burbujeo se evita debido al uso de mouseoverBubble establecido en falso.

↰ Previous page