KnockoutJS - Event Binding
Essa ligação é usada para ouvir um evento DOM específico e chamada associada à função do manipulador com base nele.
Syntax
event: <{DOM-event: handler-function}>Parameters
O parâmetro inclui um objeto JavaScript, contendo o evento DOM que será ouvido e uma função de manipulador que precisa ser chamada com base nesse evento. Essa função pode ser qualquer função JavaScript e não precisa ser necessariamente a função ViewModel.
Example
Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da associação 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
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em event-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Tente digitar qualquer valor não numérico e você receberá um alerta.
Observações
Passando um item atual como um parâmetro para a função de manipulador
KO irá passar o item atual como parâmetro ao chamar a função de tratamento. Isso é útil ao trabalhar com uma coleção de itens e precisa trabalhar em cada um deles.
Example
Vamos dar uma olhada no exemplo a seguir, no qual o item atual é passado na associação 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
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em event-bind-passing-curr-item.htm Arquivo.
Abra este arquivo HTML em um navegador.
Flavor, que tem o mouse sobre ele, é exibido.
Observe que self como um alias é usado para isso. Isso ajuda a evitar problemas com isso sendo redefinido para outra coisa nos manipuladores de eventos.
Passando mais parâmetros ou referindo-se ao objeto de evento
Pode haver uma situação em que você precise acessar o objeto de evento DOM associado ao evento. KO passa o evento como um segundo parâmetro para a função de manipulador.
Example
Vamos dar uma olhada no exemplo a seguir, no qual o evento é enviado como um 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
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em event-bind-passing-more-params.htm Arquivo.
Abra este arquivo HTML em um navegador.
Pressione shiftKey + mova o cursor para o texto. Observe que a mensagem aparecerá mostrando se você pressionou a tecla shift.
Permitindo ação padrão
O Knockout evitará que o evento execute qualquer ação padrão, por padrão. Ou seja, se você usar o evento de pressionamento de tecla para uma tag de entrada, KO apenas chamará a função do manipulador e não adicionará o valor da chave ao valor dos elementos de entrada.
Se você quiser que o evento execute uma ação padrão, basta retornar true da função de manipulador.
Example
Vejamos o exemplo a seguir, que permite que a ação padrão ocorra.
<!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
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em event-bind-default-action.htm Arquivo.
Abra este arquivo HTML em um navegador.
Qualquer tecla pressionada é realmente mostrada na caixa de entrada porque a função do manipulador retorna true.
Evitando que o evento borbulhe
KO permitirá que o evento borbulhe para os manipuladores de eventos de nível superior. Ou seja, se você tiver dois eventos de mouseover aninhados, a função de manipulador de eventos para ambos será chamada. Se necessário, esse borbulhamento pode ser evitado adicionando uma ligação extra chamada youreventBubble e passando um valor falso para ela.
Example
Vamos dar uma olhada no exemplo a seguir em que o borbulhamento é tratado.
<!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
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em event-bind-prevent-bubble.htm Arquivo.
Abra este arquivo HTML em um navegador.
Mova o botão do mouse e você verá uma mensagem. A formação de bolhas é evitada devido ao uso de mouseoverBubble definido como false.