KnockoutJS - Liaison d'événements
Cette liaison est utilisée pour écouter un événement DOM spécifique et l'appel associé à la fonction de gestionnaire en fonction de celui-ci.
Syntax
event: <{DOM-event: handler-function}>Parameters
Le paramètre inclut un objet JavaScript, contenant un événement DOM qui sera écouté et une fonction de gestionnaire qui doit être appelée en fonction de cet événement. Cette fonction peut être n'importe quelle fonction JavaScript et ne doit pas nécessairement être une fonction ViewModel.
Example
Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la liaison d'événement.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans event-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Essayez de saisir une valeur non numérique et vous serez averti par une alerte.
Observations
Passer un élément actuel en tant que paramètre à la fonction de gestionnaire
KO passera l'élément actuel en tant que paramètre lors de l'appel de la fonction de gestionnaire. Ceci est utile lorsque vous travaillez avec une collection d'éléments et que vous devez travailler sur chacun d'eux.
Example
Jetons un œil à l'exemple suivant dans lequel l'élément actuel est passé dans la liaison d'événement.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans event-bind-passing-curr-item.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
La saveur, qui a la souris dessus, est affichée.
Notez que self comme alias est utilisé pour cela. Cela permet d'éviter tout problème lié à la redéfinition de cela en quelque chose d'autre dans les gestionnaires d'événements.
Passer plus de paramètres ou référencer l'objet événement
Il peut y avoir une situation où vous devez accéder à l'objet d'événement DOM associé à l'événement. KO transmet l'événement en tant que deuxième paramètre à la fonction de gestionnaire.
Example
Jetons un coup d'œil à l'exemple suivant dans lequel l'événement est envoyé en tant que deuxième paramètre pour fonctionner.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans event-bind-passing-more-params.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Appuyez sur shiftKey + déplacez le curseur sur le texte. Notez que le message apparaîtra si vous avez appuyé sur la touche shiftKey.
Autoriser l'action par défaut
Knockout empêchera l'événement d'effectuer une action par défaut, par défaut. Cela signifie que si vous utilisez un événement keypress pour une balise d'entrée, alors KO appellera simplement la fonction de gestionnaire et n'ajoutera pas la valeur de clé à la valeur des éléments d'entrée.
Si vous souhaitez que l'événement effectue une action par défaut, renvoyez simplement true à partir de la fonction de gestionnaire.
Example
Regardons l'exemple suivant qui permet à l'action par défaut de se produire.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans event-bind-default-action.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Toute touche enfoncée est en fait affichée dans la zone de saisie car la fonction de gestionnaire renvoie true.
Empêcher l'événement de bouillonner
KO permettra à l'événement de remonter jusqu'aux gestionnaires d'événements de niveau supérieur. Cela signifie que si deux événements survolés avec la souris sont imbriqués, la fonction de gestionnaire d'événements pour les deux sera appelée. Si nécessaire, ce bullage peut être évité en ajoutant une liaison supplémentaire appelée youreventBubble et en lui passant une valeur false.
Example
Jetons un coup d'œil à l'exemple suivant dans lequel le bullage est géré.
<!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
Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -
Enregistrez le code ci-dessus dans event-bind-prevent-bubble.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Déplacez le bouton de la souris et vous verrez un message. La formation de bulles est évitée grâce à l'utilisation de mouseoverBubble définie sur false.