KnockoutJS Declarative Event Binding - KnockoutJS

What is KnockoutJS Declarative Event Binding?

This binding is used to listen to specific DOM event and call associated handler function based on it.

Syntax

Parameters

  • Parameter is inclusive of a Javascript object which contains DOM event which will be listened to and a handler function which needs to be invoked based on that event. This function can be any Javascript function and need not be necessarily ViewModel function.

Example

Let us see below example which demonstrates use of event binding:

Output

  • Let's carry out the below steps to see how the above code works:
  • Save the above code in event-bind.htm file.
  • Open this HTML file in a browser.
  • Try to key in any non numeric value and you will be prompted with an alert.

Observations

  • Passing a current item as a parameter to handler function
  • KO will pass the current item as parameter when calling handler function. This is useful when working with collection of items and need to work on each of them.

EXAMPLE

Let see below example in which current item is passed in event binding

OUTPUT

  • Let's carry out the following steps to see how the above code works:
  • Save the above code in event-bind-passing-curr-item.htm file.
  • Open this HTML file in a browser.
  • Flavor, which is having mouse over it, is displayed.

Note that self as an alias is used for this. This helps to avoid any problems with this being redefined to something else in event handlers.

Passing more parameters, or Referring the event object

There might be situation wherein you need to access DOM event object associated with event. KO passes the event as second parameter to handler function.

EXAMPLE

Let see below example in which event is sent as second parameter to function

OUTPUT

  • Let's carry out the following steps to see how the above code works:
  • Save the above code in event-bind-passing-more-params.htm file.
  • Open this HTML file in a browser.

Press shiftKey + move cursor to the text. See that message will pop up showing if you have pressed the shiftKey.

Allowing Default action

  • Knockout will avoid the event from performing any default action, by default. Meaning if you use keypress event for an input tag, then KO will just call the handler function and will not add the key value to input elements value.
  • If you want the event to perform default action, then just return true from handler function.

EXAMPLE

Let see below example in which allows default action to take place

OUTPUT

  • Let's carry out the following steps to see how the above code works:
  • Save the above code in event-bind-default-action.htm file.
  • Open this HTML file in a browser.
  • Any key pressed is actually shown in input box because handler function returns true.

Preventing the event from bubbling

KO will allow the event to bubble up to the higher level event handlers. Meaning if you have two mouseover events nested then event handler function for both of them will be called. If needed this bubbling can be prevented by adding an extra binding called as youreventBubble and passing false value to it.

EXAMPLE

Let see below example in which bubbling is handled

OUTPUT

  • Let's carry out the following steps to see how the above code works:
  • Save the above code in event-bind-prevent-bubble.htm file.
  • Open this HTML file in a browser.

Move the mouse over button and you will see a message. Bubbling is prevented due to use of mouseoverBubble set to false.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

KnockoutJS Topics