KnockoutJS - Associazione evento

Questa associazione viene utilizzata per ascoltare un evento DOM specifico e una chiamata associata alla funzione del gestore basata su di essa.

Syntax

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

Parameters

Il parametro include un oggetto JavaScript, contenente un evento DOM che verrà ascoltato e una funzione gestore che deve essere invocata in base a quell'evento. Questa funzione può essere qualsiasi funzione JavaScript e non deve essere necessariamente una funzione ViewModel.

Example

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione di eventi.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato event-bind.htm file.
Apri questo file HTML in un browser.
Prova a digitare un valore non numerico e ti verrà richiesto un avviso.

Osservazioni

Passaggio di un elemento corrente come parametro alla funzione gestore

KO passerà l'elemento corrente come parametro quando si chiama la funzione handler. Ciò è utile quando si lavora con una raccolta di elementi e si deve lavorare su ciascuno di essi.

Example

Diamo un'occhiata al seguente esempio in cui l'elemento corrente viene passato nell'associazione di eventi.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato event-bind-passing-curr-item.htm file.
Apri questo file HTML in un browser.
Viene visualizzato il sapore, che ha il mouse su di esso.
Nota che self come alias viene utilizzato per questo. Questo aiuta a evitare qualsiasi problema che venga ridefinito in qualcos'altro nei gestori di eventi.

Passaggio di più parametri o riferimento all'oggetto evento

Potrebbe esserci una situazione in cui è necessario accedere all'oggetto evento DOM associato all'evento. KO passa l'evento come secondo parametro alla funzione handler.

Example

Diamo un'occhiata al seguente esempio in cui l'evento viene inviato come secondo parametro per funzionare.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato event-bind-passing-more-params.htm file.
Apri questo file HTML in un browser.
Premere shiftKey + spostare il cursore sul testo. Osserva che il messaggio apparirà mostrando se hai premuto il tasto shift.

Consentire l'azione predefinita

Knockout eviterà che l'evento esegua qualsiasi azione predefinita, per impostazione predefinita. Significa che se usi un evento di pressione dei tasti per un tag di input, KO chiamerà semplicemente la funzione del gestore e non aggiungerà il valore della chiave al valore degli elementi di input.

Se vuoi che l'evento esegua un'azione predefinita, restituisci semplicemente true dalla funzione gestore.

Example

Esaminiamo il seguente esempio che consente l'esecuzione dell'azione predefinita.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato event-bind-default-action.htm file.
Apri questo file HTML in un browser.
Qualsiasi tasto premuto viene effettivamente mostrato nella casella di input perché la funzione del gestore restituisce true.

Impedire all'evento di ribollire

KO consentirà all'evento di raggiungere i gestori di eventi di livello superiore. Significa che se hai due eventi mouseover nidificati, verrà chiamata la funzione gestore eventi per entrambi. Se necessario, questo bubbling può essere prevenuto aggiungendo un ulteriore binding chiamato come youreventBubble e passando un valore falso ad esso.

Example

Diamo un'occhiata al seguente esempio in cui viene gestito il bubbling.

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato event-bind-prevent-bubble.htm file.
Apri questo file HTML in un browser.
Muovi il pulsante mouseover e vedrai un messaggio. Il bubbling è impedito grazie all'uso di mouseoverBubble impostato su false.

↰ Previous page

KnockoutJS - Associazione evento

Osservazioni

Passaggio di un elemento corrente come parametro alla funzione gestore

Passaggio di più parametri o riferimento all'oggetto evento

Consentire l'azione predefinita

Impedire all'evento di ribollire

Tutorial di KnockoutJS