Backbone.js on Event se usa para vincular una función de devolución de llamada a un objeto. Cuando se activa un evento, se invoca la devolución de llamada. Si hay una gran cantidad de eventos en una página, la convención es usar dos puntos para nombrar cada evento:
"poll:start", or "change:selection"
Sintaxis:
object.on(event, callback, [context] );
Las devoluciones de llamada que están vinculadas a un evento especial «todos» se activan cada vez que ocurre un evento y el nombre del evento se pasa como primer argumento.
Por ejemplo:
example.on("all", function(eventName) {
object.trigger (eventName);
});
Valores paramétricos:
- evento: Se utiliza para vincular un objeto con un evento.
- callback: Se ejecuta cuando se invoca un evento.
- contexto: es un objeto que se pasa a una función de devolución de llamada.
Ejemplo 1: este ejemplo describe Backbone.js en Event.
HTML
<!DOCTYPE html>
<head>
<title>Backbone.js On Event</title>
<script src=
"https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Backbone.js On event</h3>
<script type="text/javascript">
var obj = {};
_.extend(obj, Backbone.Events);
var counter = 0;
obj.on('trigger', function() {
counter++;
document.write(
'<h2 style="color:blue;">OUTPUT AFTER TRIGGERING ON EVENT :</h2>');
document.write(counter);
alert("triggered");
});
obj.trigger('trigger');
obj.trigger('trigger');
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo describe Backbone.js en Event especificando los múltiples eventos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js on event</title>
<script src=
"https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Backbone.js On event</h3>
<script type="text/javascript">
var value = _.extend({
name: 'GeeksforGeeks'
}, Backbone.Events);
value.on('first', function() {
document.write("Trigger-1) The triggered value is: ");
document.write(this.name);
});
value.on('second', function() {
document.write("<br>");
document.write("Trigger-2) The triggered value is: ");
document.write(this.name);
});
value.trigger('first');
value.trigger('second');
</script>
</body>
</html>
Producción:
Enlace de referencia: https://backbonejs.org/#Events-on
Publicación traducida automáticamente
Artículo escrito por yarudalbasharmacse17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA