Knockout позволяет обрабатывать ряд событий, которые используются формами в html. Для этого в KnockoutJS определены следующие типы привязок:
submit: срабатывает при отправке формы
click: используется преимущественно для обработки нажатий на ссылки и кнопки, хотя также может применяться для обработки нажатия на любой элемент DOM
hasFocus: срабатывает при получении фокуса элементом формы
event: позволяет обработать любое событие формы
Привязка hasFocus позволяет установить связать состояние фокуса элемента и значение свойства модели:
если элемент получил фокус, то связанное свойство имеет значение true:
<input data-bind="hasFocus: isFocused" />
<span data-bind="visible: isFocused">Фокус получен</span>
<script type="text/javascript">
var viewModel = {
isFocused: ko.observable(false)
};
ko.applyBindings(viewModel);
</script>
Привязка event позволяет назначить обработчик для любого события элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
</head>
<body>
<div data-bind="event: { mouseover: mouseOverHandler, mouseout: mouseOutHandler }">
<span data-bind="style: {color: textColor}">Hello World!</span>
</div>
<script type="text/javascript">
var viewModel = {
textColor: ko.observable("blue"),
mouseOverHandler: function() {
this.textColor("red");
},
mouseOutHandler: function() {
this.textColor("blue");
}
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
При определении привязки после ключевого слова "event" в фигурных скобках идут наборы событий и их обработчиков. Например, здесь mouseover -
событие наведения указателя мыши на элемент, а mouseOverHandler - его обработчик. И через запятую мы можем множество таких событий определить.
В данном случае свойство textColor во ViewModel устанавливает цвет текста в блоке div. При наведении мыши на этот блок срабатывает обработчик события mouseover - то есть функция mouseOverHandler. Эта функция меняет цвет текста с синего на красный.
При отводе мыши с элемента срабатывает другое событие - mouseout. Его обработчик - функция mouseOutHandler меняет цвет текста обратно с красного на синий.
По умолчанию в качестве первого параметра в функцию обработчика Knockout передает текущее значение модели:
<div data-bind="foreach: phones">
<p data-bind="text: $data, event: { mouseover: $parent.mouseOverHandler }"> </p>
</div>
<p data-bind="text: selectedPhone"></p>
<script type="text/javascript">
function AppViewModel() {
self = this;
self.phones = ko.observableArray(["iPhone 6S", "Galaxy S7", "Meizu Pro 6"]);
self.selectedPhone= ko.observable();
self.mouseOverHandler = function(p) {
self.selectedPhone(p);
};
};
ko.applyBindings(new AppViewModel());
</script>
В качестве второго параметра обработчика мы можем получить объект самого события:
self.mouseOverHandler = function(p, event) {
console.log(event);
};
</script>
По умолчанию Knockout использует модель всплытия событий, то есть возникнув на вложенном элементе, событие распространяется вверх к вышележащим контейнерам. Соответственно при необходимости мы несколько раз можем обработать одно и то же событие только на разных элементах. Например:
<div data-bind="event: { mouseover: divHandler }">
<button data-bind="event: { mouseover: buttonHandler }">
Hello
</button>
</div>
Здесь если мы наведем указатель мыши на кнопку, то сначала сработает обработчик buttonHandler, а затем событие будет распространяться вверх
по дереву DOM, и сработает обработчик контейнера div, в котором находится кнопка - divHandler.
Подобное поведение не всегда может быть удобным. И если необходимо, то мы можем
отключить всплытие события, используя параметр [имя_события]Bubble и передав ему значение false:
<div data-bind="event: { mouseover: divHandler }">
<button data-bind="event: { mouseover: buttonHandler }, mouseoverBubble: false">
Hello
</button>
</div>
Если библиотека jQuery подключена, то Knockout использует ее для обработки событий элементов веб-страницы.
Это поведение может быть не всегда желательным, и его можно отключить и использовать обработку событий непосредственно на основе
Knockout. Для этого перед вызовом метода ko.applyBindings необходимо произвести следующую установку:
ko.options.useOnlyNativeEvents = true;